1. 概念
flex布局（Flexible布局，彈性布局）是在小程序開發(fā)中經(jīng)常用的布局方式。學(xué)習(xí)小程序必須先弄清楚其相關(guān)特性化漆，可以在開發(fā)中更加順手猴蹂。
2. 基礎(chǔ)知識(shí)
(1) 簡(jiǎn)介
- 開啟了flex布局的元素叫flex container；
- flex container里面的直接子元素叫做flex items芳誓；
- 設(shè)置display屬性為flex或者inline-flex可以成為flex container；
flex：flex container以block-level形式存在；
inline-flex：flex container以inline-flex形式存在二鳄。
flex布局的思維導(dǎo)圖如下：
flex布局
(2) flex布局模型
flex布局模型
flex items默認(rèn)都是沿著main axis(主軸)從main start開始往main end方向排布。
(3) 應(yīng)用在flex-container上的CSS屬性
1> flex-direction：設(shè)置主軸的方向
flex-direction有四種：
- row(默認(rèn)值)：主軸為水平方向媒怯，起點(diǎn)在左端订讼；
- row-reverse：主軸為水平方向，起點(diǎn)在右端扇苞；
- column：主軸為垂直方向欺殿，起點(diǎn)在上沿；
- column-reverse：主軸為垂直方向鳖敷，起點(diǎn)在下沿脖苏；
cross axis的方向只會(huì)向下或者向右。
row
row-reverse
column
column-reverse
2> flex-wrap：設(shè)置是否換行
flex-wrap有三種：
- nowrap(默認(rèn))：?jiǎn)涡校?/strong>
- wrap：多行定踱；
- wrap-reverse：多行(較之wrap帆阳，cross start與cross end相反)。
nowrap
wrap
wrap-reverse
3> flex-flow：是flex-direction || flex-wrap的簡(jiǎn)寫
4> justify-content：設(shè)置flex items在主軸上的對(duì)齊方式
flex-direction有六種：
- flex-start(默認(rèn)值)：與main start對(duì)齊屋吨；
- flex-end：與main end對(duì)齊蜒谤；
- center：居中對(duì)齊；
- space-between：
flex items之間的距離相等至扰；
與main start鳍徽、main end兩端對(duì)齊。- space-around：
flex items之間的距離相等敢课；
flex items與main start阶祭、main end之間的距離 等于flex items之間的距離的一半绷杜。- space-evenly：
flex items之間的距離相等；
flex items與main start濒募、main end之間的距離 等于flex items之間的距離鞭盟。
justify-content
5> align-items：設(shè)置flex items在交叉軸上的對(duì)齊方式（針對(duì)單行）
align-items有五種：
- stretch(默認(rèn)值)：當(dāng)flex items在交叉軸上的size為auto時(shí)，會(huì)自動(dòng)拉伸至填充flex container瑰剃；
- flex-start：與cross start對(duì)齊齿诉；
- flex-end：與cross end對(duì)齊；
- center：居中對(duì)齊晌姚；
- baseline：與基準(zhǔn)線對(duì)齊粤剧；
align-items
6> align-content：設(shè)置flex items在交叉軸上的對(duì)齊方式（針對(duì)多行）
align-content有七種：
- stretch(默認(rèn)值)：與align-items的stretch類似；
- flex-start：與cross start對(duì)齊挥唠；
- flex-end：與cross end對(duì)齊抵恋；
- center：居中對(duì)齊；
- space-between：
flex items之間的距離相等宝磨；
與cross start弧关、cross end兩端對(duì)齊。- space-around：
flex items之間的距離相等唤锉；
flex items與cross start世囊、cross end之間的距離 等于flex items之間的距離的一半。- space-evenly：
flex items之間的距離相等腌紧；
flex items與cross start茸习、cross end之間的距離 等于flex items之間的距離。
align-content
(4) 應(yīng)用在flex-items上的CSS屬性
1> flex-grow：設(shè)置flex items在主軸方向上如何擴(kuò)展
- 可以設(shè)置任意非負(fù)數(shù)(正整數(shù)壁肋、正小數(shù)号胚、0)，默認(rèn)值為0浸遗；
- 如果所有items的flex-grow之和<1猫胁，那么items并不能 擴(kuò)展 到剛好填充container。
2> flex-shrink：設(shè)置flex items在主軸方向上如何收縮
- 可以設(shè)置任意非負(fù)數(shù)(正整數(shù)跛锌、正小數(shù)弃秆、0)，默認(rèn)值為1髓帽；
- 如果所有items的flex-shrink之和<1菠赚，那么items并不能 收縮 到剛好在container之內(nèi)。
3> flex-basis：設(shè)置flex items在主軸方向上的base size
- auto(默認(rèn)值)：自適應(yīng)郑藏；
- content：取決于內(nèi)容本身的size衡查。
決定flex items最終base size的因素，從優(yōu)先級(jí)高到底：
- max-width/max-height/min-width/min-height
- flex-basis
- width/height
- 內(nèi)容本身的size
4> flex：是flex-grow flex-shrink? || flex-basis的簡(jiǎn)寫
- 默認(rèn)值是 0 1 auto必盖；
- none：0 0 auto拌牲。
5> order：設(shè)置flex items的排布順序
- 可以設(shè)置任意整數(shù)(正整數(shù)俱饿、負(fù)整數(shù)、0)塌忽；
- 默認(rèn)值為0拍埠，值越小就越排在前面。
6> align-self：允許flex items覆蓋flex container設(shè)置的align-items
- auto(默認(rèn)值)：遵從flex container的align-items設(shè)置土居；
- 默認(rèn)值為0枣购，值越小就越排在前面。
- stretch装盯、flex-start坷虑、flex-end甲馋、center埂奈、baseline，效果與align-items一致定躏。
