先理解 flex：flex-grow flex-shrink flex-basis
flex-grow
用来分配剩余空间
flex-shrink
用来分配溢出空间
flex-basis
在前两个分配前使用，简单的说这个属性值可以理解为元素的 width 值；如果 flex-basis 和 width 其中有一个是 auto，那么另外一个非 auto 的属性优先级会更高。同时赋值时，flex-basis 的优先级更高
两栏布局
<body>
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
内容内容内容
</body>
查看解析
思路：
- 父元素 flex 布局
- 左边定宽
- 右边设置
flex: 1 1 0%;
.box {
display:flex; /*关键*/
}
.left {
width: 200px; /*关键*/
background-color: gray;
height: 400px;
}
.right {
flex: 1; /*关键*/
margin-left: 10px;
background-color: lightgray;
height: 200px;
}
三栏布局
<div class="box">
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
</div>
查看解析
思路：
- 父元素 flex 布局
- 左边右边定宽
- 中间设置
flex: 1 1 0%;
.box {
display: flex;
}
.left {
background-color: gray;
width: 200px;
height: 200px;
}
.right {
background-color: gray;
width: 200px;
height: 200px;
}
.middle {
flex: 1 1 0%;
background-color: lightgray;
}