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)寫屬性
- flex 是 flex-grom || flex-shrink || flex-basis的簡(jiǎn)寫復(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
