Flexible Box 模型西设，通常被稱為 flexbox，是一種一維的布局模型答朋。它給 flexbox 的子元素之間提供了強(qiáng)大的空間分布和對齊能力贷揽。本文給出了 flexbox 的主要特性。

我們說 flexbox 是一種一維的布局梦碗，是因?yàn)橐粋€(gè) flexbox 一次只能處理一個(gè)維度上的元素布局禽绪，一行或者一列。作為對比的是另外一個(gè)二維布局網(wǎng)格布局洪规，以后會和大家講到

    <style type="text/css">
        #flex-box {
            background: #ccc;
            display: flex;  /* display 屬性規(guī)定元素應(yīng)該生成的框的類型 ，我們是flex*/
            flex-direction: row; /* 接下來我們會講到*/
        }
        #flex-box > div {
            background: #5990dc;
            margin: 20px;
            padding: 40px;
        }
    </style>
    <div id="flex-box">
        <div>block1</div>
        <div>block2</div>
        <div>block3</div>
    </div>

效果圖如下：

image.png

2叉谜，- Flexbox的兩根軸線

當(dāng)使用 flex 布局時(shí)旗吁，首先想到的是兩根軸線 — 主軸和交叉軸。主軸由 flex-direction 定義正罢，另一根軸垂直于它阵漏。我們使用 flexbox 的所有屬性都跟這兩根軸線有關(guān), 所以有必要在一開始首先理解它。

主軸

主軸由 flex-direction 定義翻具，可以取4個(gè)值：

row
row-reverse
column
column-reverse
如果你選擇了 row 或者 row-reverse履怯，你的主軸將沿著 inline 方向延伸。

如果你選擇了 row 或者 row-reverse裆泳，你的主軸將沿著 **inline **方向延伸叹洲。

If flex-direction is set to row the main axis runs along the row in the inline direction.

選擇 column 或者 column-reverse 時(shí)，你的主軸會沿著上下方向延伸 — 也就是 block 排列的方向工禾。

If flex-direction is set to column the main axis runs in the block direction.

交叉軸

交叉軸垂直于主軸运提，所以如果你的flex-direction (主軸) 設(shè)成了 row 或者 row-reverse 的話，交叉軸的方向就是沿著列向下的闻葵。

If flex-direction is set to row then the cross axis runs in the block direction.

如果主軸方向設(shè)成了 column 或者 column-reverse民泵，交叉軸就是水平方向。

If flex-direction is set to column then the cross axis runs in the inline direction.

理解主軸和交叉軸的概念對于對齊 flexbox 里面的元素是很重要的槽畔；flexbox 的特性是沿著主軸或者交叉軸對齊之中的元素栈妆。

Flex 容器

文檔中采用了 flexbox 的區(qū)域就叫做 flex 容器。為了創(chuàng)建 flex 容器，我們把一個(gè)容器的 display 屬性值改為 flex 或者 inline-flex鳞尔。 完成這一步之后嬉橙，容器中的直系子元素就會變?yōu)?flex 元素。所有CSS屬性都會有一個(gè)初始值寥假，所以 flex 容器中的所有 flex 元素都會有下列行為：

元素排列為一行 (flex-direction 屬性的初始值是 row)市框。
元素從主軸的起始線開始。
元素不會在主維度方向拉伸糕韧，但是可以縮小枫振。
元素被拉伸來填充交叉軸大小。
flex-basis 屬性為 auto兔沃。
flex-wrap 屬性為 nowrap蒋得。

這會讓你的元素呈線形排列，并且把自己的大小作為主軸上的大小乒疏。如果有太多元素超出容器额衙，它們會溢出而不會換行。如果一些元素比其他元素高怕吴，那么元素會沿交叉軸被拉伸來填滿它的大小窍侧。

Flex布局主要的API

display: flex; 規(guī)定元素應(yīng)該生成flex的類型，直系子元素就會變?yōu)?flex 元素
flex-direction: row | column | row-reverse | column-reverse; 更改flex方向

為了更好地控制 flex 元素转绷，有三個(gè)屬性可以作用于它們：在使用這三個(gè)屬性之前我們簡單了解一下布局空白（available space）這個(gè)概念

image.png

flex-grow 定義了該元素的布局空白（available space）的基準(zhǔn)值伟件。該屬性的默認(rèn)值是 auto 。此時(shí)议经，瀏覽器會檢測這個(gè)元素是否具有確定的尺寸斧账。在上面的例子中, 所有元素都設(shè)定了寬度（width）為100px，所以 flex-basis 的值為100px煞肾。

如果沒有給元素設(shè)定尺寸咧织，flex-basis 的值采用元素內(nèi)容的尺寸。這就解釋了：我們給只要給Flex元素的父元素聲明 display: flex 籍救，所有子元素就會排成一行习绢，且自動分配小大以充分展示元素的內(nèi)容。

flex-shrink flex-grow 若被賦值為一個(gè)正整數(shù)蝙昙， flex 元素會以 flex-basis 為基礎(chǔ)闪萄，沿主軸方向增長尺寸。這會使該元素延展奇颠，并占據(jù)此方向軸上的布局空白（available space）败去。如果有其他元素也被允許延展，那么他們會各自占據(jù)布局空白的一部分烈拒。

如果我們給上例中的所有元素設(shè)定 flex-grow 值為1为迈，容器中的布局空白會被這些元素平分三椿。它們會延展以填滿容器主軸方向上的空間。
flex-grow 屬性可以按比例分配空間葫辐。如果第一個(gè)元素 flex-grow 值為2，其他元素值為1伴郁，則第一個(gè)元素將占有2/4（上例中耿战，即為 200px 中的 100px）, 另外兩個(gè)元素各占有1/4（各50px）。

flex-basis屬性 flex-basis 指定了 flex 元素在主軸方向上的初始大小焊傅。如果不使用 box-sizing 來改變盒模型的話剂陡，那么這個(gè)屬性就決定了 flex 元素的內(nèi)容盒（content-box）的寬或者高（取決于主軸的方向）的尺寸大小。"

這三個(gè)屬性為了方便編碼狐胎，我們一般都會混合著寫在 flex 簡寫形式中:

    <style type="text/css">
        #flex-box {
            background: #ccc;
            display: flex;
            flex-direction: row;
        }
        #flex-box > div {
            flex: 1 1 auto;  /* 從左到右的參數(shù)依次為 flex-grow鸭栖，flex-shrink，flex-basis */
            background: #5990dc;
            margin: 20px;
            padding: 40px;
        }
    </style>
    <div id="flex-box">
        <div>block1</div>
        <div>block2</div>
        <div>block3</div>
    </div>

我們來看看flex元素自適應(yīng)后的效果

image.png

flex元素對齊和空間分配

align-items屬性將所有直接子節(jié)點(diǎn)上的align-self值設(shè)置為一個(gè)組握巢。 align-self屬性設(shè)置項(xiàng)目在其包含塊中的對齊方式晕鹊。") 屬性可以使元素在交叉軸方向?qū)R。
這個(gè)屬性的初始值為stretch暴浦，這就是為什么flex元素會默認(rèn)被拉伸到最高元素的高度溅话。實(shí)際上，它們被拉伸來填滿flex容器 —— 最高的元素定義了容器的高度歌焦。

你也可以設(shè)置align-items的值為flex-start飞几，使flex元素按flex容器的頂部對齊, flex-end 使它們按flex容器的下部對齊, 或者center使它們居中對齊. 在實(shí)例中嘗試——我給出了flex容器的高度，以便你可以看到元素在容器中移動独撇⌒寄看看如果更改 align-items的值為下列值會發(fā)生什么：

stretch
flex-start
flex-end
center

<style type="text/css">
        #flex-box {
            height: 400px;
            background: #ccc;
            display: flex;
            flex-direction: row;
            align-items: center;   /* 這個(gè)時(shí)候flex元素就會在交叉軸的地方居中對齊 */
        }
        #flex-box > div {
            /* flex: 1 1 auto;  為了更方便查看效果，我們先注釋 */
            background: #5990dc;
            margin: 20px;
            padding: 40px;
        }
    </style>
    <div id="flex-box">
        <div>block1</div>
        <div>block2</div>
        <div>block3</div>
    </div>

image.png

justify-content屬性用來使元素在主軸方向上對齊纷铣，主軸方向是通過 flex-direction 設(shè)置的方向卵史。初始值是flex-start，元素從容器的起始線排列关炼。但是你也可以把值設(shè)置為flex-end程腹，從終止線開始排列，或者center儒拂，在中間排列.

你也可以把值設(shè)置為space-between寸潦，把元素排列好之后的剩余空間拿出來，平均分配到元素之間社痛，所以元素之間間隔相等见转。或者使用space-around蒜哀，使每個(gè)元素的左右空間相等斩箫。

在實(shí)例中嘗試下列justify-content屬性的值：

stretch
flex-start
flex-end
center
space-around
space-between

<style type="text/css">
        #flex-box {
            height: 400px;
            background: #ccc;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;  /* 結(jié)合align-items:center 和 justify-content: center 我們就能實(shí)現(xiàn)我們所說的垂直水平居中 */
        }
        #flex-box > div {
            /*flex: 1 1 auto;*/
            background: #5990dc;
            margin: 20px;
            padding: 40px;
        }
    </style>
    <div id="flex-box">
        <div>block1</div>
        <div>block2</div>
        <div>block3</div>
    </div>

最終效果:

image.png

最主要的flex用法介紹完了，目前幾乎能兼容所有移動端（你要相信人們換手機(jī)的速度）

更詳細(xì)的內(nèi)容請參閱：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

css布局----flex彈性布局(移動端完美解決方案）

css布局----flex彈性布局(移動端完美解決方案）

目錄

主軸

交叉軸

Flex 容器

Flex布局主要的API

flex元素對齊和空間分配