采用Flex布局的元素绷蹲，稱(chēng)為Flex容器（flex container），簡(jiǎn)稱(chēng)”容器”顾孽。它的所有子元素自動(dòng)成為容器成員瘸右，稱(chēng)為Flex項(xiàng)目（flex item），簡(jiǎn)稱(chēng)”項(xiàng)目”岩齿。
上篇介紹設(shè)置在容器上的屬性太颤，本篇繼續(xù)介紹設(shè)置在項(xiàng)目上的屬性。
六盹沈、設(shè)置在項(xiàng)目上的屬性
order – 決定flex元素的順序龄章。
align-self – 自身對(duì)齊交叉軸，覆蓋父元素設(shè)置的align-items
align-self屬性接受和align-items一樣的那些值乞封。flex-grow –定義項(xiàng)目的放大比例做裙，默認(rèn)為0，即如果存在剩余空間肃晚，也不放大锚贱。
flex-shrink –定義項(xiàng)目的縮小比例，默認(rèn)為1关串，即如果空間不足拧廊，該項(xiàng)目將縮小。
flex-basis –在分配多余空間之前晋修，項(xiàng)目占據(jù)的主軸空間吧碾。
flex –flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto墓卦。后兩個(gè)屬性可選
項(xiàng)目上主軸方向相關(guān)屬性
1 項(xiàng)目-主軸：order
語(yǔ)法：
order: number
order屬性規(guī)定了彈性容器中的可伸縮項(xiàng)目在布局時(shí)的順序倦春。元素按照 order 屬性的值的增序進(jìn)行布局。擁有相同 order 屬性值的元素按照它們?cè)谠创a中出現(xiàn)的順序進(jìn)行布局落剪。
.test {
width: 600px;
border: 1px solid #000;
display: flex;
}
.test p{
width: 100px;
height: 100px;
background-color: red;
line-height: 100px;
text-align: center;
margin: 8px;
}
.item1 {
order: 1;
}
.item2 {
order: 0;
}
.item3 {
order: -1;
}
<div class="test">
<p class="item1">1</p>
<p class="item2">2</p>
<p class="item3">3</p>
</div>
注意點(diǎn)：
- 所有 flex 項(xiàng)默認(rèn)的 order 值是 0睁本。
- order 值大的 flex 項(xiàng)比 order 值小的在顯示順序中更靠后。
- 相同 order 值的 flex 項(xiàng)按源順序顯示忠怖。所以假如你有四個(gè)元素呢堰，其 order 值分別是2，1脑又，1和0暮胧，那么它們的顯示順序就分別是第四锐借，第二，第三往衷，和第一钞翔。
- 第三個(gè)元素顯示在第二個(gè)后面是因?yàn)樗鼈兊?order 值一樣，且第三個(gè)元素在源順序中排在第二個(gè)后面席舍。
2 項(xiàng)目-交叉軸：align-self
語(yǔ)法：
align-self: auto|stretch|center|flex-start|flex-end|baseline
設(shè)置在項(xiàng)目上的交叉軸方向的屬性只有一個(gè)布轿，align-self自身對(duì)齊交叉軸，覆蓋父元素設(shè)置的align-items来颤，屬性值列表和align-items相同融求。
屬性值:
flex-start: 元素與容器的頂部對(duì)齊呕诉。
flex-end: 元素與容器的底部對(duì)齊斥黑。
center: 元素縱向居中狸演。
baseline: 元素在容器的基線(xiàn)位置顯示。
stretch: 元素被在側(cè)軸方向被拉伸到與容器相同的高度或?qū)挾取?/p>
3 項(xiàng)目-主軸：flex-basis
語(yǔ)法：
flex-basis: number|auto
取值：
flex-basis指定了 flex 元素在主軸方向上的初始大小滑黔。如果不使用 box-sizing 來(lái)改變盒模型的話(huà)笆包，那么這個(gè)屬性就決定了 flex 元素的內(nèi)容盒（content-box）的寬或者高（取決于主軸的方向）的尺寸大小。
flex-basis 的取值有兩個(gè)：number和auto略荡。
- flex-basic 初始值默認(rèn)取值是auto,
如果主軸方向是水平方向(row)庵佣，auto等于flex項(xiàng)目的寬度(width)。
如果主軸方向是垂直方向(conlumn), auto等于flex項(xiàng)目的高度(height)汛兜。 - flex-basis 取值為number, 表示可以設(shè)置flex元素的主軸方向的最小寬度或者最小高度巴粪，number 單位為px, rem。
- 注意：flex-basis 取值為number會(huì)覆蓋掉flex項(xiàng)目原有的寬度或高度(取決于主軸的方向)粥谬。
.test {
width: 600px;
border: 1px solid #000;
display: flex;
}
div p{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 10px;
}
.item1{
background-color: red;
}
.item2 {
background-color: green;
flex-basis: 200px;
}
.item3 {
background-color: orange;
flex-basis: auto;
}
<div class="test">
<p class="item1">1</p>
<p class="item2">2</p>
<p class="item3">3</p>
</div>
可見(jiàn)肛根，item3和原始寬度一樣，item2的flex-basis的200px, 覆蓋掉width:100px,
4 容器-主軸：flex-grow
語(yǔ)法：
flex-grow: number
flex-grow 指的是當(dāng)flex項(xiàng)目沒(méi)有占滿(mǎn)整個(gè)flex容器的空間時(shí)帝嗡，每一個(gè)項(xiàng)目怎么變化晶通，要不要變大去占據(jù)空間，grow就是生長(zhǎng)哟玷，長(zhǎng)大的意思。
flex-grow屬性定義項(xiàng)目的放大比例一也，默認(rèn)為0巢寡，即不作任何的放大。flex容器下的項(xiàng)目是根據(jù)flex-grow值的權(quán)重對(duì)容器的剩余可用空間進(jìn)行放大的椰苟。注意：剩余可用空間是減去所有flex元素后計(jì)算得到的空間大小抑月。number負(fù)值無(wú)效。
.test {
width: 600px;
border: 1px solid #000;
display: flex;
}
div p{
height: 100px;
line-height: 100px;
text-align: center;
margin: 10px;
background-color: orange;
}
.item1{
flex-grow: 1;
}
.item2 {
flex-grow: 2;
}
.item3 {
flex-grow: 3;
}
<div class="test">
<p class="item1">1</p>
<p class="item2">2</p>
<p class="item3">3</p>
</div>
這里因?yàn)樗衒lex項(xiàng)目都沒(méi)有設(shè)置固定寬度舆蝴，所以谦絮，他們會(huì)按照各自flex-basis設(shè)置值的占總體值之和的權(quán)重去擴(kuò)展自身的寬度题诵。
即item1占1份，item1的寬度為容器寬度的1/6层皱。item2占2份性锭，item2的寬度為容器寬度的2/6。item3占3份叫胖，item3的寬度為容器寬度的3/6草冈。
注意：容器寬度為去掉margin和padding后的寬度。
5 容器-主軸：flex-shrink
語(yǔ)法：
flex-shrink: number
flex-shrink 指的是當(dāng)flex項(xiàng)目超出整個(gè)flex容器的空間時(shí)瓮增，每一個(gè)項(xiàng)目怎么變化怎棱，要不要縮小去適應(yīng)空間，shrink就是縮小的意思绷跑。
該屬性定義項(xiàng)目的縮小比例拳恋，默認(rèn)為0，即不作任何的縮小砸捏。flex容器下的項(xiàng)目是根據(jù)這個(gè)值的權(quán)重得出容器的超出空間比例分配诅岩，對(duì)設(shè)置該屬性的項(xiàng)目進(jìn)行縮小。number負(fù)值無(wú)效带膜。
.test {
width: 600px;
border: 1px solid #000;
display: flex;
}
div p{
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 10px;
background-color: orange;
}
.item1{
flex-shrink: 0;
}
.item2 {
flex-shrink: 1;
}
.item3 {
flex-shrink: 2;
}
<div class="test">
<p class="item1">1</p>
<p class="item2">2</p>
<p class="item3">3</p>
</div>
這里flex容器的寬度設(shè)置成600px吩谦，flex項(xiàng)目的寬度均為300px；為item1分配完空間后膝藕，剩下的空間被后面兩個(gè)項(xiàng)目按比例縮小分配式廷。
注意：容器寬度為去掉margin和padding后的寬度。
注意:flex 元素僅在默認(rèn)寬度之和大于容器的時(shí)候才會(huì)發(fā)生收縮芭挽，其收縮的大小依據(jù) flex-shrink 的值滑废。比如：上邊示例中，容器test總寬度為600px袜爪，每個(gè)p寬度為300px蠕趁，3個(gè)flex元素的寬度大于容器的寬度，所以3個(gè)p依據(jù)flex-shrink值進(jìn)行收縮辛馆。
6 項(xiàng)目-主軸 flex
6.1 語(yǔ)法：
flex: flex-grow flex-shrink flex-basis | auto
flex屬性是前三個(gè)屬性：flex-grow俺陋、flex-shrink、flex-basis的簡(jiǎn)寫(xiě)形式昙篙。
除了可以分別填flex-grow腊状、flex-shrink、flex-basis苔可，這3個(gè)屬性值外缴挖。
6.2 flex還有2個(gè)經(jīng)常使用的屬性值：
initial 屬性默認(rèn)值，相當(dāng)于將屬性設(shè)置為"flex: 0 1 auto"焚辅。
元素會(huì)根據(jù)自身寬高設(shè)置尺寸映屋。它會(huì)縮短自身以適應(yīng)容器苟鸯，但不會(huì)伸長(zhǎng)并吸收f(shuō)lex容器中的額外自由空間來(lái)適應(yīng)容器 。
auto : 相當(dāng)于將屬性設(shè)置為 "flex: 1 1 auto"棚点。
元素會(huì)根據(jù)自身的寬度與高度來(lái)確定尺寸早处，但是會(huì)自行伸長(zhǎng)以吸收f(shuō)lex容器中額外的自由空間，也會(huì)縮短至自身最小尺寸以適應(yīng)容器乙濒。
none : 相當(dāng)于將屬性設(shè)置為"flex: 0 0 auto"陕赃。
元素會(huì)根據(jù)自身寬高來(lái)設(shè)置尺寸。它是完全非彈性的：既不會(huì)縮短颁股，也不會(huì)伸長(zhǎng)來(lái)適應(yīng)flex容器么库。
建議優(yōu)先使用這個(gè)2個(gè)屬性，而不是單獨(dú)寫(xiě)三個(gè)分離的屬性甘有。
6.3 flex語(yǔ)法
flex 屬性可以指定1個(gè)诉儒，2個(gè)或3個(gè)值。
單值語(yǔ)法: 值必須為以下其中之一:
- 一個(gè)無(wú)單位數(shù)(<number>): 它會(huì)被當(dāng)作<flex-grow>的值亏掀。如：flex:1
- 一個(gè)有效的寬度(width)值: 它會(huì)被當(dāng)作 <flex-basis>的值忱反。如：flex:200px
- 關(guān)鍵字none, auto,或initial. 如：flex:auto
雙值語(yǔ)法: 第一個(gè)值必須為一個(gè)無(wú)單位數(shù)，并且它會(huì)被當(dāng)作<flex-grow>的值滤愕。第二個(gè)值必須為以下之一：
- 一個(gè)無(wú)單位數(shù)：它會(huì)被當(dāng)作<flex-shrink>的值温算。如：flex:1 1
- 一個(gè)有效的寬度值: 它會(huì)被當(dāng)作<flex-basis>的值。如：flex:1 200px
三值語(yǔ)法:
- 第一個(gè)值必須為一個(gè)無(wú)單位數(shù)间影，并且它會(huì)被當(dāng)作<flex-grow>的值注竿。
- 第二個(gè)值必須為一個(gè)無(wú)單位數(shù)，并且它會(huì)被當(dāng)作 <flex-shrink>的值魂贬。
- 第三個(gè)值必須為一個(gè)有效的寬度值巩割， 并且它會(huì)被當(dāng)作<flex-basis>的值。
如：flex:1 1 200px
結(jié)尾
至此付燥，flex布局所有屬性都介紹完畢
