三列-flex

flex 实现三列布局

by Alex Liu

HTML

<div class="container">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

SCSS

.container{
  display: flex;
}

.main{
  flex-grow: 1;
  height: 300px;
	    background-color: red;
}

.left{
  order: -1;
  height: 300px;
	    background-color: blue;
      flex: 0 1 200px;
}

.right{
  height: 300px;
	    background-color: green;
      flex: 0 1 100px;
}