一、Flex 基本概念

（1）主軸【main axis】：默認(rèn)為水平方向；
（2）交叉軸【cross axis】：垂直于主軸，默認(rèn)為豎直方向；
（3）通過(guò)修改使垂直方向變?yōu)橹鬏S，水平方向變?yōu)榻徊孑S

二、Flex 容器

任何一個(gè)容器都可以被指定為 flex 布局，簡(jiǎn)單說(shuō)來(lái)，如果你使用塊元素如 div，你就可以使用 flex，而如果你使用行內(nèi)元素，你可以使用 inline-flex。設(shè)置 flex 布局之后，子元素的 float、clear、vertical-align 的屬性將會(huì)失效。

.container {   
     display: flex | inline-flex;//可以有兩種取值
 }

• flex：塊狀 flex 容器
• inline-flex：行內(nèi) flex 容器

三、Flex 容器屬性

1. flex-direction

flex-direction ：決定主軸的方向

.container{
    flex-direction: row | row-reverse | column | column-reverse;
}

• row【默認(rèn)值】：主軸為水平方向，起點(diǎn)在左端。【column類似】
  
• row-reverse：主軸為水平方向，起點(diǎn)在右端?！綾olumn-reverse類似】

2. flex-wrap

flex-wrap：決定容器內(nèi)項(xiàng)目是否可換行

• nowrap【默認(rèn)】：不換行
• wrap：換行
• wrap-reverse：換行倒序

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

3. flex-flow

flex-flow：flex-direction 和 flex-wrap 的簡(jiǎn)寫形式；一般不用這種寫法，建議分開(kāi)寫；

.container {
    flex-flow: <flex-direction> || <flex-wrap>;
}

4. justify-content

justify-content：定義了項(xiàng)目在主軸的對(duì)齊方式。

.container {    
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start【默認(rèn)】：左對(duì)齊
• flex-end：右對(duì)齊
• center：居中
• space-between：兩端對(duì)齊，項(xiàng)目之間的間隔相等，即剩余空間等分成間隙。
• space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等，所以項(xiàng)目之間的間隔比項(xiàng)目與邊緣的間隔大一倍

5. align-items

align-items：定義了項(xiàng)目在交叉軸上的對(duì)齊方式

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start：左對(duì)齊
• flex-end：右對(duì)齊
• center：居中
• stretch： 即如果項(xiàng)目未設(shè)置高度或者設(shè)為 auto，將占滿整個(gè)容器的高度
• baseline：項(xiàng)目的第一行文字的基線對(duì)齊

6. align-content

align-content：定義了多根軸線的對(duì)齊方式，如果項(xiàng)目只有一根軸線，那么該屬性將不起作用；文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-502168.html

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• flex-start【默認(rèn)】：軸線全部在交叉軸上的起點(diǎn)對(duì)齊
• flex-end：軸線全部在交叉軸上的終點(diǎn)對(duì)齊
• center：軸線全部在交叉軸上的中間對(duì)齊
• space-between：兩端對(duì)齊，項(xiàng)目之間的間隔相等，即剩余空間等分成間隙。
• space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等，所以項(xiàng)目之間的間隔比項(xiàng)目與邊緣的間隔大一倍

到了這里，關(guān)于微信小程序之Flex布局的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！