diaplay:flex

Flex布局的特點(diǎn):

? 任意方向的伸縮鱼填，向左刮刑，向右干旁，向下魁袜，向上

? 在樣式層可以調(diào)換和重排順序

? 主軸和側(cè)軸方便配置

? 子元素的空間拉伸和填充

? 沿著容器對(duì)齊

伸縮容器

設(shè)有display:flex或者display:block的元素就是一個(gè)flex Container(伸縮容器)桩撮，里面的子元素稱為flex item(伸縮項(xiàng)目)，flex container中子元素都是使用Flex布局排版峰弹。

伸縮容器是一個(gè)HTML標(biāo)簽元素店量，并且display屬性顯式的設(shè)置了flex屬性值。在伸縮容器中的所有子元素都會(huì)自動(dòng)變成伸縮項(xiàng)目鞠呈。設(shè)為 Flex 布局以后垫桂，子元素的float、clear和vertical-align屬性將失效粟按。

?display:block 指定為塊內(nèi)容器模式诬滩，總是使用新行開(kāi)始顯示，微信小程序的視圖容器(view,scroll-view和swiper)默認(rèn)都是display:block灭将。

?display:flex:指定為行內(nèi)容器模式疼鸟，在一行內(nèi)顯示子元素，可以使用flex-wrap屬性指定其是否換行庙曙，flex-wrap有三個(gè)值:nowrap(不換行),wrap(換行),wrap-reverse(換行第一行在下面)

使用display:block(默認(rèn)值)的代碼

運(yùn)行結(jié)果是：使用display:block結(jié)果：1?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3

使用display:flex后的效果是：123

容器的屬性

Flex布局的伸縮容器可以使用任何方向進(jìn)行布局空镜。容器默認(rèn)有兩個(gè)軸：主軸(main axis)和側(cè)軸(cross axis)。主軸的開(kāi)始位置為主軸起點(diǎn)(main start)捌朴，主軸的結(jié)束位置為主軸終點(diǎn)(main end),而主軸的長(zhǎng)度為主軸長(zhǎng)度(main size)吴攒。同理側(cè)軸的起點(diǎn)為側(cè)軸起點(diǎn)(cross start),結(jié)束位置為側(cè)軸終點(diǎn)(cross end),長(zhǎng)度為側(cè)軸長(zhǎng)度(cross size)。詳情見(jiàn)下圖:

以下6個(gè)屬性可以設(shè)置在容器上砂蔽。

flex-direction ? ? flex-wrap ? ?flex-flow ? ?justify-content ? ? align-items ? ? align-content

（1）flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）洼怔。

? row :從左到右的水平方向?yàn)橹鬏S

? row-reverse：從右到左的水平方向?yàn)橹鬏S

? column:從上到下的垂直方向?yàn)橹鬏S

? column-reverse從下到上的垂直方向?yàn)橹鬏S

如果水平方向?yàn)橹鬏S，那個(gè)垂直方向就是側(cè)軸左驾，反之亦然镣隶。四種主軸方向設(shè)置的效果圖:

(2)flex-wrap屬性

? ? ?默認(rèn)情況下供嚎，項(xiàng)目都排在一條線（又稱"軸線"）上俯抖。flex-wrap屬性定義，如果一條軸線排不下爆班，如何換行杂伟。

? ? flex-wrap: nowrap | wrap | wrap-reverse;

? （1）nowrap（默認(rèn)）：不換行描函。

? （2）wrap：換行活逆，第一行在上方审编。

? （3）wrap-reverse：換行，第一行在下方次员。

(3)flex-flow屬性

? ? ?flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式样眠，默認(rèn)值為row nowrap。

(4)justify-content屬性

? ? justify-content屬性定義了子容器在主軸上的對(duì)齊方式翠肘。

? ?它可能取5個(gè)值，具體對(duì)齊方式與軸的方向有關(guān)辫秧。下面假設(shè)主軸為從左到右束倍。

? ?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)目與邊框的間隔大一倍柿究。

每種屬性對(duì)應(yīng)的作用效果如圖所示：

(5)align-items屬性

align-items屬性適用于所有的flex容器邮旷，它是用來(lái)設(shè)置每個(gè)flex元素在側(cè)軸上的默認(rèn)對(duì)齊方式。align-items和align-content有相同的功能蝇摸，不過(guò)不同點(diǎn)是它是用來(lái)讓每一個(gè)單行的容器居中而不是讓整個(gè)容器居中婶肩。

align-items表示側(cè)軸上的對(duì)齊方式:

? stretch 填充整個(gè)容器(默認(rèn)值)

? flex-start 側(cè)軸的起點(diǎn)對(duì)齊

? flex-end 側(cè)軸的終點(diǎn)對(duì)齊

? center 在側(cè)軸中居中對(duì)齊

? baseline 以子元素的第一行文字對(duì)齊

各個(gè)屬性對(duì)應(yīng)的布局效果如圖：

(6)align-content屬性

align-content屬性只適用于多行的flex容器，并且當(dāng)側(cè)軸上有多余空間使flex容器內(nèi)的flex線對(duì)齊貌夕。

關(guān)于align-content和align-items的區(qū)別比較：

align-content是針對(duì)flex容器里面多軸(多行)的情況,align-items是針對(duì)一行的情況進(jìn)行排列律歼。在元素布局的時(shí)候，如果有多個(gè)側(cè)軸啡专，則align-content生效险毁，如果只有一個(gè)側(cè)軸，則align-items生效们童。

(7)align-self是寫(xiě)在flex的子項(xiàng)屬性上的

align-self 屬性定義flex的子項(xiàng)單獨(dú)在側(cè)軸（縱軸）方向上的對(duì)齊方式畔况。

注意：align-self 屬性可重寫(xiě)靈活容器的 align-items 屬性。

align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式慧库，可覆蓋align-items屬性跷跪。默認(rèn)值為auto，表示繼承父元素的align-items屬性齐板，如果沒(méi)有父元素域庇，則等同于stretch嵌戈。

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}

該屬性可能取6個(gè)值，除了auto听皿，其他都與align-items屬性完全一致熟呛。