先理解 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;
}