1.order 決定item的排布順序
設(shè)置整數(shù)，數(shù)值越小排在越前面
默認(rèn)值為0
<style>
.item1{
order: 3;
}
.item2{
order: 2;
}
.item3{
order: 1;
}
</style>
order.png
2.align-self 決定單個(gè)item在交叉軸上的對(duì)齊方式
覆蓋container設(shè)置的aligh-items,且效果相同
同樣包含stretch、flex-start、center、flex-end、baseline屬性
<style>
.container{
align-items: center;
}
.item2{
align-self: flex-start;
}
</style>
align_self.png
3.flex-grow 決定items如何擴(kuò)展
- 可以設(shè)置正小數(shù)、正整數(shù)，默認(rèn)值是0
- 只有當(dāng)container在主軸上有剩余容量寬度時(shí)，flex-grow才會(huì)有效
- flex-grow決定的是擴(kuò)展的寬度，而不是item的最終寬度，因此正常情況下不通過(guò)flex-grow來(lái)控制item的寬度
- 由于使用flex-grow會(huì)導(dǎo)致的item的寬度不可控，一般用在自適應(yīng)寬度的元素上。比如兩欄布局、三欄布局
- 固定寬度的元素，不建議設(shè)置flex-grow
1.當(dāng)flex-grow總和超過(guò)1，每個(gè)item擴(kuò)展的size等于 container剩余容量 / items的flex-grow總和 * item自己的flex-grow
- 案例：容器寬度500，item寬度均為50。擴(kuò)展的size = 350 / (1+2+3) * item自身的flex-grow
<style>
.item1{
flex-grow: 1;
}
.item2{
flex-grow: 2;
}
.item3{
flex-grow: 3;
}
</style>
grow1.png
2.當(dāng)flex-grow總和小于1，每個(gè)item擴(kuò)展的size等于 container剩余容量 * item自己的flex-grow
- 案例：容器寬度500，item寬度均為50。 擴(kuò)展的size = 350 * item自身的flex-grow
<style>
.item1{
flex-grow: .2;
}
.item2{
flex-grow: .2;
}
.item3{
flex-grow: .2;
}
</style>
grow2.png
3.實(shí)際應(yīng)用，三欄布局，兩邊寬度固定，中間自適應(yīng)
<style>
.container{
width: 700px;
height: 400px;
border: 1px solid #000;
/* flex布局的排列方式 */
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
}
.item{
color: #fff;
text-align: center;
font-size: 18px;
}
.item1{
width: 80px;
flex-grow: 0;
}
.item2{
flex-grow: 1;
}
.item3{
width: 100px;
flex-grow: 0;
}
</style>
<body>
<div class="container">
<div class="item item1" style="background: #f00;">固定寬度80</div>
<div class="item item2" style="background: #0f0;">中間寬度自適應(yīng),撐滿容器container</div>
<div class="item item3" style="background: #00f;">固定寬度100</div>
</div>
</body>
grow3.png
4.flex-shrink 決定items如何收縮
- 可以設(shè)置正小數(shù)、正整數(shù)，默認(rèn)值是1
- 只有當(dāng)items的總寬度超過(guò)container的寬度時(shí)，才會(huì)有效。且默認(rèn)收縮至等于container的寬度
- 收縮計(jì)算方式和grow相同，但是最終收縮的寬度不能小于item的文本寬度和最小寬度
- 正常開(kāi)發(fā)情況下一般讓grow的值等于shrink，使item的寬度自適應(yīng)擴(kuò)展和收縮
<style>
.item1{
flex-shrink: 1;
}
.item2{
flex-shrink: 3;
}
.item3{
flex-shrink: 2;
}
</style>
shrink.png
5.flex-basis 設(shè)置item在主軸上的大小
- 默認(rèn)值為auto
- 優(yōu)先級(jí)大小：max-width > flex-basis > widht > 內(nèi)容本身size
- 會(huì)覆蓋設(shè)置在item上的width屬性
<style>
.item1{
flex-basis: 100px;
}
.item2{
flex-basis: 200px;
}
.item3{
flex-basis: 300px;
}
</style>
basis.png
6.flex 復(fù)合簡(jiǎn)寫(xiě)屬性
- flex 是 flex-grom || flex-shrink || flex-basis的簡(jiǎn)寫(xiě)復(fù)合屬性，可以指定1個(gè)、2個(gè)、3個(gè)值。
- 但是為了養(yǎng)成良好的代碼風(fēng)格，通常指定三個(gè)值
- 第一個(gè)值是flex-grow，第二個(gè)值是flex-shrink，第三個(gè)值是flex-basis
- 固定寬度的item設(shè)置
flex : 0 0 100px - 自適應(yīng)寬度的item設(shè)置
flex : 1 1 auto
案例：三欄布局，中間自適應(yīng)
<style>
.container{
width: 600px;
height: 400px;
border: 1px solid #000;
/* flex布局的排列方式 */
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
}
.item{
color: #fff;
text-align: center;
font-size: 18px;
}
.item1{
flex: 0 0 80px;
}
.item2{
flex: 1 1 auto;
}
.item3{
flex: 0 0 100px;
}
</style>
<body>
<div class="container">
<div class="item item1" style="background: #f00;">寬度80</div>
<div class="item item2" style="background: #0f0;">中間自適應(yīng)</div>
<div class="item item3" style="background: #00f;">寬度100</div>
</div>
</body>
flex6.png
