Flexbox是一個強大而靈活的布局，本篇文章主要對其進行學習了解所踊。

一泌枪、Flexbox簡介

Flexbox布局（Flexible Box)模塊旨在提供一個更加有效的方式制定、調整和分布一個容器里的項目布局秕岛，即使他們的大小是未知或者是動態(tài)的碌燕。簡單的理解，就是可以自動調整继薛，計算元素在容器空間中的大小修壕，并進行有效合理的布局。

Flexbox布局中有兩個重要的概念：Flex容器和Flex項目遏考。

Flex容器包含多個Flex項目慈鸠，通過對Flex容器和Flex項目的具體屬性進行設置，可以達到各種各樣靈活的布局樣式灌具。

Flexbox使用

Flexbox的使用非常簡單青团，只需要對Flex容器設置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項目沿著主軸（Main Axis）的排列方向胖腾，可以是行（水平）、列（垂直）或者行和列的反向瘪松。

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

但是當flex-direction的屬性值是column咸作，對應的主軸就應該垂直向下。

具體應用示例如下：

2. flex-wrap

flex-wrap屬性控制Flex項目是否換行宵睦。默認情況下记罚，F(xiàn)lex容器會在一行內容納所有的Flex項目，因為flex-wrap屬性的默認值是nowrap壳嚎，也就是不換行桐智。

具體應用示例如下：

3. flex-flow

flex-flow是flex-direction和flex-wrap兩個屬性的速記屬性说庭。

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

4. justify-content

justify-content屬性，控制Flex項目在整個Main-Axis上的對齊方式刊驴。

justify-content的默認屬性值是flex-start姿搜。

space-between讓flex項目兩端對齊。

space-around讓每個flex項目具有相同的空間

5. align-items

align-items控制Flex項目在Cross-Axis對齊方式捆憎。

align-items的默認值是stretch舅柜，讓所有的Flex項目高度和Flex容器高度一樣，鋪展開躲惰。

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

align-content屬性與align-items作用相同，不過該屬性只針對多行太伊，對單行無效雇锡。

三逛钻、Flex項目

接下來繼續(xù)介紹Flex項目的具體屬性及使用方法僚焦。

1. order

order允許Flex項目在一個Flex容器中重新排序芳悲，屬性默認值是0。

依據order值的大小進行排序边坤，按照值從低到高依次排序名扛。

默認情況下，排序如下：

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

如下所示弄企，將方塊1和方塊2都設置為order:1。

2. flex-grow 和 flex-shrink

flex-grow和flex-shrink屬性控制Flex項目在容器有多余的空間如何放大（擴展）区拳，在沒有額外空間又如何縮小拘领。

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

默認情況下樱调，flex-grow屬性值設置為0约素，表示Flex項目不會增長届良，填充Flex容器可用空間。

默認情況下圣猎，flex-shrink屬性值設置為1士葫，表示Flex項目會縮小，適應屏幕寬度样漆。

如果把flex-grow的值設置為1为障，如下所示：

當多個flex項目在一行內，即不換行時放祟，設置不同的flex-grow和flex-shrink 值鳍怨，對應的空間分配也不同。

flex-grow

將每一個item所設置的 grow 全部加起來跪妥，獲得可用空間鞋喇，然后除以總的grow值，得到單位分配空間眉撵。

根據每一個item 設置的 grow 來算侦香，如果一個item 的grow 為 6，那么 這個 item 在主軸上的尺寸就需要延伸 6*單位分配空間的大小纽疟。

flex-shrink

先將所有項目 按照 flex-shrink * item-size 的方式加起來 得到一個加權和罐韩，然后計算出 每一份 item 的 shrink比例: shrink比例 = flex-shrink * item-size / 之前的總和。最后每一個item 減去這個 shrink比例 * 負可用空間污朽。

在flex項目有min-width(height)和max-width(height)時散吵，對應的項目要考慮上下限值，把剩余的伸縮值分配給其他項目蟆肆。

3. flex-basis

flex-basis指定了 flex 元素在主軸方向上的初始大小矾睦，即決定了 flex項目內容的寬或者高（取決于主軸的方向）的尺寸大小。

默認情況炎功，F(xiàn)lex項目的初始寬度由flex-basis的默認值決定枚冗，即：flex-basis: auto。Flex項目寬度的計算是基于內容的多少來自動計算蛇损。

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

• flex-basis 的優(yōu)先級比 width/height 非auto高
• width/height auto優(yōu)先級等于 flex-basis，取兩者中的最大值淤齐。

4. align-self

align-self 控制單個項目沿著Cross-Axis的對其方式股囊。

除了auto之外，上述示例中flex容器設置了align-itmes：center床玻。

auto 是將目標flex項目的值設置為父元素的 align-items值毁涉，或者如果該元素沒有父元素的話，就設置為 stretch锈死。上述示例中align-items：stretch贫堰。

四穆壕、總結

以上是對flexbox的整體介紹，可以看出其強大與靈活其屏。除此之外喇勋，flexbox還有很多其他的特性以及問題，這里就不再介紹偎行，建議看以下兩篇文章涂籽，寫的很好乐导，本文也主要參考了這兩篇文章。

理解Flexbox：你需要知道的一切

深入理解 flex 布局以及計算

如果想實踐一下對flexbox的掌握，可以試著做百度前端技術學院中的這個作業(yè)搔涝。