Flexbox是一個(gè)強(qiáng)大而靈活的布局，本篇文章主要對(duì)其進(jìn)行學(xué)習(xí)了解。

一、Flexbox簡(jiǎn)介

Flexbox布局（Flexible Box)模塊旨在提供一個(gè)更加有效的方式制定、調(diào)整和分布一個(gè)容器里的項(xiàng)目布局，即使他們的大小是未知或者是動(dòng)態(tài)的。簡(jiǎn)單的理解，就是可以自動(dòng)調(diào)整，計(jì)算元素在容器空間中的大小，并進(jìn)行有效合理的布局。

Flexbox布局中有兩個(gè)重要的概念：Flex容器和Flex項(xiàng)目。

Flex容器包含多個(gè)Flex項(xiàng)目，通過(guò)對(duì)Flex容器和Flex項(xiàng)目的具體屬性進(jìn)行設(shè)置，可以達(dá)到各種各樣靈活的布局樣式。

Flexbox使用

Flexbox的使用非常簡(jiǎn)單，只需要對(duì)Flex容器設(shè)置display:flex或者display:inline-flex，就可以具體操作使用Flexbox布局了。

下面以具體示例演示：

html代碼

<div class="container">
        <div class="wrap">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

css代碼

.container {
    width: 70%;
    height: 500px;
    margin:20px auto;
    border: 1px solid black;
}
.container .wrap {
    display: flex;
    border: 3px solid #a448cf;
    margin:20px;
    width:80%;
    height:80%  
}
.container .wrap div {
    width:150px;
    height:150px;
    background-color: #c75a5a;
    margin:10px;
}

二、Flex容器

首先介紹下Flex容器的具體屬性以及具體的使用方式。

1. flex-direction

flex-direction屬性控制Flex項(xiàng)目沿著主軸（Main Axis）的排列方向，可以是行（水平）、列（垂直）或者行和列的反向。

默認(rèn)情況下flex-direction的屬性值是row,具體排列方式如下：

但是當(dāng)flex-direction的屬性值是column，對(duì)應(yīng)的主軸就應(yīng)該垂直向下。

具體應(yīng)用示例如下：

2. flex-wrap

flex-wrap屬性控制Flex項(xiàng)目是否換行。默認(rèn)情況下，F(xiàn)lex容器會(huì)在一行內(nèi)容納所有的Flex項(xiàng)目，因?yàn)閒lex-wrap屬性的默認(rèn)值是nowrap，也就是不換行。

具體應(yīng)用示例如下：

其中wrap-reverse表示Flex項(xiàng)目在容器中多行排列，只是方向是反的。

3. flex-flow

flex-flow是flex-direction和flex-wrap兩個(gè)屬性的速記屬性。

具體不再解釋，看下面示例即可：

4. justify-content

justify-content屬性，控制Flex項(xiàng)目在整個(gè)Main-Axis上的對(duì)齊方式。

justify-content的默認(rèn)屬性值是flex-start。

space-between讓flex項(xiàng)目?jī)啥藢?duì)齊。

space-around讓每個(gè)flex項(xiàng)目具有相同的空間

5. align-items

align-items控制Flex項(xiàng)目在Cross-Axis對(duì)齊方式。

align-items的默認(rèn)值是stretch，讓所有的Flex項(xiàng)目高度和Flex容器高度一樣，鋪展開(kāi)。

baseline

讓所有flex項(xiàng)目在Cross-Axis上沿著他們自己的基線對(duì)齊。

其中stretch和baseline在不設(shè)置具體高度值，才會(huì)如上表現(xiàn)，否則會(huì)顯示固定的高度。

align-content屬性與align-items作用相同，不過(guò)該屬性只針對(duì)多行，對(duì)單行無(wú)效。

三、Flex項(xiàng)目

接下來(lái)繼續(xù)介紹Flex項(xiàng)目的具體屬性及使用方法。

1. order

order允許Flex項(xiàng)目在一個(gè)Flex容器中重新排序，屬性默認(rèn)值是0。

依據(jù)order值的大小進(jìn)行排序，按照值從低到高依次排序。

默認(rèn)情況下，排序如下：

當(dāng)將方塊1設(shè)置order:1后，排序如下：

如果，多個(gè)Flex項(xiàng)目具有相同的order值，F(xiàn)lex項(xiàng)目重新排序是基于HTML源文件的位置進(jìn)行排序。

如下所示，將方塊1和方塊2都設(shè)置為order:1。

2. flex-grow 和 flex-shrink

flex-grow和flex-shrink屬性控制Flex項(xiàng)目在容器有多余的空間如何放大（擴(kuò)展），在沒(méi)有額外空間又如何縮小。

flex-grow和flex-shrink 的值可以為 0或者大于0的任何正數(shù)。

默認(rèn)情況下，flex-grow屬性值設(shè)置為0，表示Flex項(xiàng)目不會(huì)增長(zhǎng)，填充Flex容器可用空間。

默認(rèn)情況下，flex-shrink屬性值設(shè)置為1，表示Flex項(xiàng)目會(huì)縮小，適應(yīng)屏幕寬度。

如果把flex-grow的值設(shè)置為1，如下所示：

當(dāng)多個(gè)flex項(xiàng)目在一行內(nèi)，即不換行時(shí)，設(shè)置不同的flex-grow和flex-shrink 值，對(duì)應(yīng)的空間分配也不同。 

flex-grow

將每一個(gè)item所設(shè)置的 grow 全部加起來(lái)，獲得可用空間，然后除以總的grow值，得到單位分配空間。

根據(jù)每一個(gè)item 設(shè)置的 grow 來(lái)算，如果一個(gè)item 的grow 為 6，那么 這個(gè) item 在主軸上的尺寸就需要延伸 6*單位分配空間的大小。

flex-shrink

先將所有項(xiàng)目 按照 flex-shrink * item-size 的方式加起來(lái) 得到一個(gè)加權(quán)和，然后計(jì)算出 每一份 item 的 shrink比例: shrink比例 = flex-shrink * item-size / 之前的總和。最后每一個(gè)item 減去這個(gè) shrink比例 * 負(fù)可用空間。

在flex項(xiàng)目有min-width(height)和max-width(height)時(shí)，對(duì)應(yīng)的項(xiàng)目要考慮上下限值，把剩余的伸縮值分配給其他項(xiàng)目。

3. flex-basis

flex-basis指定了 flex 元素在主軸方向上的初始大小，即決定了 flex項(xiàng)目?jī)?nèi)容的寬或者高（取決于主軸的方向）的尺寸大小。

默認(rèn)情況，F(xiàn)lex項(xiàng)目的初始寬度由flex-basis的默認(rèn)值決定，即：flex-basis: auto。Flex項(xiàng)目寬度的計(jì)算是基于內(nèi)容的多少來(lái)自動(dòng)計(jì)算。

flex-basis和width/height有一定的優(yōu)先級(jí)，具體規(guī)則如下：

1. flex-basis 的優(yōu)先級(jí)比 width/height 非auto高
2. width/height auto優(yōu)先級(jí)等于 flex-basis，取兩者中的最大值。

4. align-self

align-self 控制單個(gè)項(xiàng)目沿著Cross-Axis的對(duì)其方式。

除了auto之外，上述示例中flex容器設(shè)置了align-itmes：center。

auto 是將目標(biāo)flex項(xiàng)目的值設(shè)置為父元素的 align-items值，或者如果該元素沒(méi)有父元素的話，就設(shè)置為 stretch。上述示例中align-items：stretch。

四、總結(jié)

以上是對(duì)flexbox的整體介紹，可以看出其強(qiáng)大與靈活。除此之外，flexbox還有很多其他的特性以及問(wèn)題，這里就不再介紹。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論