flex屬性是 flex-grow + flex-shrink + flex-basis 的縮寫。
1.賦給3個值
.item {
flex: 100 200 300px;
}
// 等價於
.item {
flex-grow: 100;
flex-shrink: 200;
flex-basis: 300px;
}
2.賦值為auto
.item {
flex: auto;
}
//等價於
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
3.賦值為none
.item {
flex: none;
}
// 等價於
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
4.賦值為非負數
// 該數字為 flex-grow 值，而flex-shrink 的值取 1，flex-basis 取 0%：
.item {
flex: 1;
}
// 等價於
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
5.賦值為一個長度或百分比
// 將長度或百分比設為 flex-basis 值，而flex-grow 取 1，flex-shrink 取 1
.item1 {
flex: 0%;
}
// 等價於
.item1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
// -----------------
.item2 {
flex: 24px;
}
// 等價於
.item2 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}
6.賦值為兩個非負數
// 將兩個數字分別設為 flex-grow 和 flex-shrink 的值，而flex-basis 取 0%
.item {
flex: 10 20;
}
// 等價於
.item {
flex-grow: 10;
flex-shrink: 20;
flex-basis: 0%;
}
7.賦值為一個非負數和一個長度或百分比
// 將非負數字和 長度或百分比 分別設為 flex-grow 和 flex-basis 的值，flex-shrink 取 1
.item {
flex: 10 100px;
}
// 等價於
.item {
flex-grow: 10;
flex-shrink: 1;
flex-basis: 100px;
}
flex-basis 規定的是子元素的基准值。所以是否溢出的計算與此屬性有關。flex-basis 規定的范圍取決於 box-sizing。這里主要討論以下 flex-basis 的取值情況：
auto：首先檢索該子元素的主尺寸，如果主尺寸不為 auto，則使用值采取主尺寸之值；如果也是 auto，則使用值為 content。
content：指根據該子元素的內容自動布局。有的用戶代理沒有實現取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。
百分比：根據其包含塊（即伸縮父容器）的主尺寸計算。如果包含塊的主尺寸未定義（即父容器的主尺寸取決於子元素），則計算結果和設為 auto 一樣。
舉一個不同的值之間的區別：
<div class="parent">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
</div>
<style type="text/css">
.parent {
display: flex;
width: 600px;
}
.parent > div {
height: 100px;
}
.item-1 {
width: 140px;
flex: 2 1 0%;
background: blue;
}
.item-2 {
width: 100px;
flex: 2 1 auto;
background: darkblue;
}
.item-3 {
flex: 1 1 200px;
background: lightblue;
}
</style>
主軸上父容器總尺寸為 600px
子元素的總基准值是：0% + auto + 200px = 300px，其中
- 0% 即 0 寬度
- auto 對應取主尺寸即 100px
故剩余空間為 600px - 300px = 300px
伸縮放大系數之和為： 2 + 2 + 1 = 5
剩余空間分配如下：
- item-1 和 item-2 各分配 2/5，各得 120px
- item-3 分配 1/5，得 60px
各項目最終寬度為：
- item-1 = 0% + 120px = 120px
- item-2 = auto + 120px = 220px
- item-3 = 200px + 60px = 260px
當 item-1 基准值取 0% 的時候，是把該項目視為零尺寸的，故即便聲明其尺寸為 140px，也並沒有什么用，形同虛設
而 item-2 基准值取 auto 的時候，根據規則基准值使用值是主尺寸值即 100px，故這 100px 不會納入剩余空間
————————————————
版權聲明：本文為CSDN博主「constantE」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/lianfengzhidie/article/details/86679759