前言

flex 是常用的 css3 布局方式搞莺，可以用少量的代碼高效的實現(xiàn)各種頁面布局，是一個基礎(chǔ)的但是必須會的基本技能掂咒，在面試中經(jīng)常會用到才沧。

例如迈喉，最基本的讓你實現(xiàn)元素的水平／垂直居中，或在這個基礎(chǔ)上延伸出更多其他復(fù)雜一些的問題温圆。

下面我們先簡單的認(rèn)識一下 flex挨摸，了解一下 flex 有哪些屬性，再結(jié)合示例對每一個屬性進行講解岁歉，進一步了解 flex 的使用得运，掌握每一個屬性的作用。屬性比較多锅移，配合使用可以實現(xiàn)各種各樣的布局熔掺，為了篇幅不過于冗余，不會過多的舉例非剃。

如果您之前還沒掌握 flex 布局置逻，希望你在看這篇文章時，可以邊看邊動手實現(xiàn)每個例子努潘，并嘗試更多的排列組合實現(xiàn)不同的效果诽偷，加深印象。并在以后運用到實際項目中疯坤，這樣才能真正掌握好這個技能报慕。

如果您已經(jīng)掌握 flex 布局，也希望能幫你溫習(xí)溫習(xí)压怠，加深記憶眠冈。

有時候隔一段時間沒使用，可能會忘記某個屬性的作用菌瘫，回過頭再看一下這篇文章蜗顽，可以快速喚起記憶。

歡迎一起學(xué)習(xí)交流雨让，如有錯漏歡迎指出^_雇盖。

一、flex 簡單介紹

Flex 全稱 Flexible box 布局模型栖忠，通常稱為 flexbox 或 flex崔挖，也稱為彈性盒子或彈性布局。一種比較高效率的 css3 布局方案庵寞。

既然是盒子狸相，首先需要一個容器 container，然后是項目 item捐川。容器包裹著項目脓鹃，再通過配置不同的屬性，實現(xiàn)各種各樣的排列分布古沥。

flex 有兩根軸線瘸右，分別是主軸和交叉軸娇跟，主軸的方向由 flex-diretion 屬性控制，交叉軸始終垂直于主軸尊浓。

容器為項目的分布提供的空間逞频，軸線則控制項目的排列跟對齊的方向， flex 是一種一維的布局栋齿，一個容器只能是一行（左右）或者一列（上下），通過主軸控制項目排列的方向（上下/左右）襟诸，交叉軸配合實現(xiàn)不同的對齊方式瓦堵。有時候一行放不下，可以實現(xiàn)多行的布局歌亲，但是對于 flex 來說菇用，新的一行就是一個新的獨立的 flex 容器。作為對比的是另外一個二維布局 CSS Grid 布局陷揪，可以同時處理行和列上的布局惋鸥。

image

• flex container（容器）／flex item（子元素，也稱為項目）
• main axis（主軸）：項目排列布局的方向悍缠，默認(rèn)是水平方向卦绣。
• main start（主軸起始位置）：項目排列布局的起始位置，容器的左邊緣線位置飞蚓。
• main end（結(jié)束位置）：項目排列布局的結(jié)束位置滤港，容器的右邊緣線位置。
• main size：項目沿主軸方向所占的尺寸趴拧。
• cross axis（交叉軸）：垂直于主軸溅漾，與項目的對齊相關(guān)，默認(rèn)是垂直方向著榴。
• cross start（交叉軸起始位置）：容器的頂部邊緣線添履。
• cross end（結(jié)束位置）：容器的底部邊緣線。
• cross size：項目沿交叉軸方向所占的尺寸脑又。

二暮胧、flex 的兩根軸線

當(dāng)使用 flex 布局時，首先想到的是兩根軸線 — 主軸（Main Axis）和交叉軸（Cross Axis）挂谍。主軸由 flex-direction 定義叔壤，交叉軸垂直于主軸。

理解主軸和交叉軸的概念對于對齊 flex 里面的項目是很重要的口叙，flexbox 的特性是沿著主軸或者交叉軸對齊之中的項目炼绘，接下來要學(xué)習(xí)掌握的 flex 的所有屬性都與這兩根軸線有關(guān)，必須要理解它妄田。

image

主軸方向俺亮，箭頭的起始位置的容器邊緣線就是對應(yīng)軸的起始位置驮捍，同理重點位置的容器邊緣線對應(yīng)軸的終點位置。

交叉軸垂直于主軸脚曾，主軸是 row／row-reverse -水平方向的時候东且，交叉軸的起始位置是頂部邊緣，結(jié)束位置是底部邊緣線本讥。主軸是 column/column-reverse - 垂直方向的時候珊泳，交叉軸的起始位置是容器的左邊邊緣線，結(jié)束位置是右邊邊緣線拷沸。

三色查、flex 容器（container）

flex 必須有一個容器 container，跟多個子元素 item撞芍。

當(dāng)把一個元素的 display 屬性設(shè)置為 flex 或者 inline-flex 后秧了，它就成了一個容器。

flex 與 inline-flex 的關(guān)系就類似 block 與 inline-block 的關(guān)系序无，定義里容器是行內(nèi)元素還是塊級元素验毡。

元素變成容器后，就會有一些默認(rèn)的行為帝嗡，如果現(xiàn)在看不懂晶通，先大概有個印象：

1. 項目的 block、 float丈探、clear 和 vertical-align 屬性都失效录择。因為項目的排列對齊方式已經(jīng)變成由 flex 屬性控制。flex 屬性有默認(rèn)值碗降，后面會詳細(xì)說明每個屬性的作用與默認(rèn)值隘竭。
2. 項目從左到右（主軸方向）排列為一行 (flex-direction 屬性的初始值是 row)。
3. 項目在主緯度（主軸）方向讼渊，不會拉伸动看，但如果項目加起來超出容器范圍則默認(rèn)會自動縮小，不會另起一行爪幻。
4. 項目在交叉軸方向如果沒有設(shè)置高度菱皆，會被拉伸填充滿容器，如果容器沒有設(shè)置高度則以最高的項目的高度為容器的高度挨稿。

下面是一個簡單的例子：

<div class="container">
  <div class="item">元素一</div>
  <div class="item">元素二</div>
  <div class="item">元素三</div>
</div>
<style>
  .container {
    display: flex;
    width: 300px; // 把容器寬度設(shè)置為 300px;沒有設(shè)置高度仇轻。
  }
  .item {
    width: 150px; // 每個項目寬度為 150px，加起來大于 300px
    line-height: 100px; // 設(shè)置項目默認(rèn)撐開的高度為 100px
  }
  .container :nth-child(1) {
    background-color: #E3ABB3;
    height: 100px; // 第一個項目給定固定高度 100px奶甘；
  }
  .container :nth-child(2) {
    background-color: #9DC54B;
  }
  .container :nth-child(3) {
    background-color: #1FBEE7;
    height: 300px;
  }
</style>

image

上面例子展示了 設(shè)置為 flex 后的容器的一些變化篷店。

1. 設(shè)置前，容器內(nèi)項目是塊級元素，設(shè)置后疲陕，行為變成行內(nèi)元素方淤。
2. 設(shè)置前，項目寬為 150px蹄殃，設(shè)置后自動縮小成100px携茂，因為容器寬度設(shè)置了 300px。
3. 設(shè)置前诅岩，容器高度是撐開到 500px讳苦，設(shè)置后，變成 300px吩谦，與項目中最高的項目三高度一致医吊。
4. 設(shè)置前，“元素一”為 100px逮京，設(shè)置后，高度不變束莫，因為項目本身設(shè)置了高度懒棉，
5. 設(shè)置前，“元素二”為 100px览绿，設(shè)置后策严，高度被拉伸到 300px，與容器等高饿敲，因為“元素二”本身沒有設(shè)置高度妻导。

基于上面這些默認(rèn)行為，有的同學(xué)可能會有疑問怀各。

如果不想從左到右倔韭，想從右到左怎么辦？（常見的需求）

如果不想項目自動縮小瓢对，想換行怎么辦寿酌？（常見的需求）

如果不想頂部對齊，想垂直居中怎么辦硕蛹？

…

帶著這些問題醇疼，來看看 flex 是怎么實現(xiàn)的。

四法焰、flex 的屬性

與 Flex 有關(guān)的屬性秧荆，主要包括以下幾個：

用于容器 container 的屬性：

1. <font color="red">flex-direction</font> - 用于指定主軸的方向，有4個常用選項 row 埃仪、row-reverse乙濒、 colunm 、colunm-reverse 贵试。row 是行（與 inline 行為一致琉兜，從左向右 → ）凯正，colunm 是列（與 block 行為一致，從上到下 ↓ ）豌蟋。帶上 reverse 的是指反向廊散，即原來 row 是左右 → ，row-reverse 就是右左 ←梧疲，column 是上下 ↓允睹，則 column 就是下上 ↑ 。
2. <font color="red">flex-wrap</font> - 用于指定項目太多超過一行的時候是否換行幌氮。默認(rèn) flex-wrap: nowrap; 不換行缭受。
3. <font color="red">flex-flow</font> - 是 flex-direction 和 flex-wrap 的合并簡寫。flex-flow: <flex-direction> <flex-wrap>;
4. <font color="red">justify-content</font> - 用于控制項目在主軸上的對齊方式该互。默認(rèn)是 justfy-content: flex-start; 米者，主軸起始線對齊。
5. <font color="red">align-items</font> - 用于控制項目在交叉軸上的對齊方式宇智。默認(rèn)是 align-items：stretch; 蔓搞，如果項目沒有設(shè)置高度，則拉伸填充到容器同樣高度随橘，如果設(shè)置了高度則頂部對齊喂分。
6. <font color="red">align-content</font> - 用于控制多根軸線（多行）在交叉軸上的對齊方式。

用于項目 item 的屬性：

1. <font color="red">flex-grow</font> - 用于控制項目在主軸方向上拉伸放大占剩余空間（如果有的話）的比例机蔗。默認(rèn)是 flex-grow: 0 蒲祈，不拉伸。
2. <font color="red">flex-shrink</font> - 用于控制項目在主軸方向上縮小的程度萝嘁。默認(rèn)是 flex-shrink: 1 梆掸，同等比例收縮。數(shù)值越大酿愧，收縮越多沥潭。
3. <font color="red">flex-basis</font> - 用于初始化項目占據(jù)主軸空間的尺寸，默認(rèn)是 flex-basis: auto; 嬉挡，自動檢測尺寸钝鸽，如果項目有設(shè)置，則取項目設(shè)置的值庞钢，否則根據(jù)項目內(nèi)容計算出尺寸拔恰。
4. <font color="red">flex</font> - 是上面三個合并的簡寫 flex: <flex-grow> <flex-shrink> <flex-basis>; 。
5. <font color="red">align-self</font> - 控制項目本身在交叉軸上的對齊方式基括。優(yōu)先級高于 align-items颜懊。默認(rèn)是 align-self: auto; ，意思是使用 align-items 設(shè)置的值。比 align-items 多一個 auto 選項河爹，其他選項與 align-items 一致匠璧。
6. <font color="red">order</font> - 用于控制項目在主軸上的排列順序。默認(rèn)是 0 咸这，全部項目按主軸方向依次排列夷恍。設(shè)置后，按數(shù)值大小媳维，從小到大排列酿雪。

接下來是每個屬性的使用說明

以下面代碼為例子：

<div class="container">
  <div class="item">元素一</div>
  <div class="item">元素二</div>
  <div class="item">元素三</div>
  <div class="item">...</div>
</div>
<style>
  .container {
    display: flex;
    border: 1px dashed #666666;
    text-align: center;
    width: 400px; // 把容器寬度設(shè)置為 400px;沒有設(shè)置高度。
  }
  .item {
    width: 100px; // 每個項目寬度為 150px侄刽，加起來大于 300px
    line-height: 100px; // 設(shè)置項目默認(rèn)撐開的高度為 100px
  }
  .container :nth-child(1) {
    background-color: #E3ABB3;
  }
  .container :nth-child(2) {
    background-color: #9DC54B;
  }
  .container :nth-child(3) {
    background-color: #1FBEE7;
  }
</style>

flex 容器的屬性：flex-direction

flex-direction 在前面介紹軸線的時候就提到這個指黎，direction 是方向，指向的意思州丹，所以這個屬性主要用于改變軸線的方向醋安。也就是項目的排列方向。

flex-direction 有 4 個常用選項值墓毒。

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

默認(rèn)值：flex-direction: row;茬故。

row 與 row-reverse 是水平方向，cloumn 與 cloumn-reverse 是垂直方向蚁鳖。 reverse 是顛倒、相反的意思赁炎，所以帶 reverse 的總與不帶的方向相反醉箕。

注：下面例子中項目未超出容器，白色格子假設(shè)表示容器“剩余的空間”徙垫，這里講剩余空間是為了方便理解讥裤，實際上這個空間被叫做 positive free space ，如果項目超出的容器空間姻报，溢出的部分叫做 negative free space己英。

image

• row ：默認(rèn)值，主軸方向為水平方向吴旋，從左向右排列损肛，起始位置是容器的左邊線；
• row-reverse：主軸方向是水平方向荣瑟，從右向左排列治拿，起始位置是容器的右邊線；
• column：垂直方向笆焰，從上到下排列劫谅，其實位置是容器的上邊線；
• column-reverse：垂直方向，從下到上排列捏检，起始位置是容器是下邊線荞驴；

flex 容器的屬性：flex-wrap

flex-wrap 有 3 個常用選項值，用于指定項目太多超過一行的時候是否換行贯城。

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

默認(rèn)值： flex-wrap: nowrap; 不換行熊楼。

設(shè)置值為 wrap 時，如果一行放不下所有項目的時候冤狡，就會自動在換行顯示孙蒙，新的一行的一個新的容器。如果 flex-direction 屬性為 row 悲雳，則創(chuàng)建新行挎峦、如果為 column則創(chuàng)建新列。

設(shè)置值為 wrap-reverse合瓢，也會換行坦胶，加上 reverse 后，換行的方向與原來相反晴楔。

接下來在上面的例子多加幾個項目顿苇，來測一下 flex-wrap 的效果，例子以 flex-deriction: row; 水平方向試驗税弃，可自行測試其他方向下的行為纪岁，加深理解。

image

• nowrap ：默認(rèn)值则果，項目沒有換行幔翰，項目總寬度超過容器，自動縮小寬度西壮。

• wrap：項目換行遗增，新的一行在第一行項目的下方。

• wrap-reverse：項目換行款青，新的一行在第一行項目的上方做修。

這里可以試試把容器的高度設(shè)置為高于項目的高度硝岗，看看 wrap 和 wrap-server 在交叉軸方向上的怎么對齊的～

可以試試把 flex-direction 設(shè)置為 column 看看有什么不同～

flex 容器的屬性： flex-flow

是 flex-direction 和 flex-wrap 的合并簡寫勾给。

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

默認(rèn)是 flex-flow: row nowrap;

例如

flex-flow: column wrap;
// 相當(dāng)于
flex-direction: column;
flex-wrap: wrap;

flex 容器的屬性：justify-content

justify 翻譯過來是“使每行排齊、使齊行”砰奕，content 翻譯過來是“內(nèi)容”康震。合在一起大概意思就是使行的內(nèi)容對齊的意思旋炒。所以，justify-content 是用于控制項目在主軸上的對齊方式签杈。

有 6 個常用選項瘫镇。

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

默認(rèn)值： justify-content: flex-start;

image

• flex-start：默認(rèn)值鼎兽，項目在主軸方向上，以主軸起始位置對齊铣除。圖例中主軸方向是從左到右谚咬，起始位置是容器的左邊線，可以看到項目是左邊對齊的尚粘。
• flex-end：項目在主軸方向上择卦，以主軸結(jié)束的位置對齊。圖例中結(jié)束位置是容器的右邊線郎嫁，所以是右邊對齊秉继。
• center：項目在主軸方向上居中。
• space-between：項目在主軸方向上泽铛，兩端對齊尚辑，然后項目中間間隔是相等的。
• space-around：在主軸方向上盔腔，剩余的空間被平均的分配到每個項目的兩側(cè)杠茬。
• space-evenly：在主軸上，剩余空間平均分配弛随，與 space-between 不同的是瓢喉，between 是在項目之間，而 evenly 是在軸的最左邊和最右邊也同樣會有空間分配舀透。

<i>以下是我個人的理解栓票，為了加深對這些參數(shù)的印象，你可以參考愕够，也可以按你自己的方式理解記憶逗载。</i>

space 是“空間”的意思，between 是“在...之間”的意思链烈，所以，可以看到 space-between 剩余的空間平均的分配在每個項目之間挚躯。

around 是“四周强衡、圍繞”的意思。每個項目左右兩邊都會分配到相等的空間码荔，并且項目與項目之間的空間獨立不合并漩勤。圖例中，“元素一”左邊只有圍繞它本身的空間缩搅，而右邊有“元素二”越败、“元素三”的空間，所以右邊空間是左邊的兩倍硼瓣。以此類推究飞，在中間的項目的間隔都是“兩倍”置谦，直到最后一個項目的右邊空間又是“一倍”。

evenly 是“平均亿傅、均勻”的意思媒峡，所以，剩余的空間是均勻分配的葵擎。

假設(shè)項目是 n 個谅阿，space-between 兩端沒有分配空間，只有項目之間的間隔有分配酬滤，空間平均分配 n-1 份签餐，分配在項目與項目之間。space-evenly 兩端也有盯串，空間平均分配 n+1 份氯檐。space-around 是兩側(cè)都有，空間平均分配 2n 份嘴脾。

flex 容器的屬性：align-items

align-items 是控制項目在交叉軸上的對齊方式男摧。

有 5 個常用選項。

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

默認(rèn)值：align-items: stretch;

image

• stretch：默認(rèn)值译打，如果項目沒有設(shè)置固定高度耗拓，則會被拉伸填充滿交叉軸方向剩余的空間。
• flex-start：項目在沿交叉軸起始線位置對齊奏司。
• flex-end：項目沿交叉軸終點線位置對齊乔询。
• center：項目在交叉軸方向居中對齊。
• baseline：項目在交叉軸方向沿項目中第一行文字的基線對齊韵洋。

這個也比較好理解竿刁，stretch 是“拉伸，拉長”的意思搪缨，所以項目會被拉伸食拜。這里如果項目設(shè)置了固定高度，會沿交叉軸的起始位置對齊副编。

start负甸、end、center 分別的“起始”痹届、“終點”呻待、“中間”的意思，所以項目分別是起始位置队腐、終端位置蚕捉、居中對齊。

baseline 是“基線柴淘、底線”的意思迫淹，這里是沿文字的基線對齊的意思秘通。

flex 容器的屬性：align-content

align-content 控制多行項目（多根主軸線）對齊方式。類似 justify-content 千绪，只不過充易，align-content 是控制行與行之間的空間分配，justify-content 是控制項目與項目之間的空間分配荸型。

有 7 個常用的選項盹靴。

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

默認(rèn)值：align-content: stretch;

<div class="container">
  <div class="item">元素一</div>
  <div class="item">元素二</div>
  <div class="item">元素三</div>
  <div class="item">元素四</div>
  <div class="item">元素五</div>
  <div class="item">元素六</div>
  <div class="item">元素七</div>
  <div class="item">元素八</div>
  <div class="item">元素九</div>
</div>
<style>
  .container {
    border: 1px dashed #666666;
    margin: 100px auto;
    display: flex;
    width: 150px;
    height: 250px;
    text-align: center;
    flex-direction: row;
    flex-wrap: wrap;
    /* flex-flow: column wrap; */
    /* justify-content: flex-start; */
    /* align-items: stretch; */
    align-content: stretch;
  }
  .item {
    width: 50px; // 項目寬度為 50px
  }
  .container :nth-child(1) { background-color: #E3ABB3; height: 50px; }
  .container :nth-child(2) { background-color: #9DC54B; }
  .container :nth-child(3) { background-color: #1FBEE7; }
  .container :nth-child(4) { background-color: #218BCC; height: 50px; }
  .container :nth-child(5) { background-color: #6695D3; }
  .container :nth-child(6) { background-color: #CFD841; }
  .container :nth-child(7) { background-color: #F1B605; }
  .container :nth-child(8) { background-color: #E3ABB3; }
  .container :nth-child(9) { background-color: #9DC54B; height: 50px; }
</style>

image

上面圖例中“元素一、五瑞妇、九”設(shè)置了固定的高度稿静。其他項目高度自動識別。因為 align-items 的默認(rèn)值的效果辕狰，其他項目會被拉伸填充到與行的高度同高改备。

• stretch：默認(rèn)值，交叉軸方向剩余的空間平均分配到每一行蔓倍，并且行的高度會拉伸悬钳，填滿整行的空間。圖例中偶翅，因為 align-items 默認(rèn)值的效果默勾，第一行高度原本是以最高的“元素一”的高度為行的高度。然后又因為 align-content 的效果聚谁，拉伸了行的高度母剥。而其中，“元素一”設(shè)置了固定高度形导，所以沒有被拉伸环疼，“元素二、三”沒有設(shè)置高度朵耕，所以被拉伸填充到與行同樣的高度炫隶。
• flex-start：所有行在交叉軸方向上，以交叉軸的起始位置對齊阎曹。
• flex-end：所有行在交叉軸方向上伪阶，以交叉軸的終點位置對齊。
• center：所有行在交叉軸上居中對齊芬膝。
• space-between：行在交叉軸方向上，兩端對齊形娇，然后行中間的間隔相等锰霜。
• space-around：在交叉軸方向上，剩余的空間被平均的分配到每一行的兩側(cè)桐早。
• space-evenly：在交叉軸方向上癣缅，剩余空間平均分配厨剪，與 space-between 不同的是，between 是在行之間友存，而 evenly 是在軸的最左邊和最右邊也同樣會有空間分配祷膳。

flex 項目的屬性：flow-grow

flex-grow 用于控制項目在主軸方向上拉伸放大占剩余空間（如果有的話）的比例。

grow 的意思是“擴大屡立，使生長”直晨，所以就是讓項目放大的意思。

.item {
  flex-grow: <number>;
}

默認(rèn)值：0膨俐，不放大勇皇。

image

例子中，容器寬設(shè)為 300px焚刺，項目寬設(shè)為 50px敛摘。項目總寬 150px，剩余空間寬 150px

flex-grow 都設(shè)置為 1 的時候乳愉，項目拉伸成 100px兄淫，剩余空間被按 1:1:1 分配，每個項目各占了 1/3蔓姚。

flex-grow 分別設(shè)為 33捕虽、66、66 的時候赂乐，項目分別被拉伸成 87.5px薯鳍、125px、87.5px挨措，剩余空間被按 1:2:1 分配挖滤，項目分別占了剩余空間的 1/4、1/2浅役、1/4斩松。

可以看到，放大的比例跟數(shù)值的大小無關(guān)觉既，跟數(shù)值的比例有關(guān)惧盹。

flex 項目的屬性：flow-shrink

flex-shrink 用于控制項目在主軸方向上縮小的程度。數(shù)值越大瞪讼，收縮越多钧椰。但它與 flex-grow 不一樣，不是按比例收縮的符欠，具體的收縮算法原理可以參考 控制Flex子元素在主軸上的比例嫡霞。

shrink 是“收縮、縮小”的意思希柿，所以就是讓項目縮小的意思诊沪。

.item {
  flex-shrink: <number>;
}

默認(rèn)是 flex-shrink: 1 养筒，同等比例收縮。

image

例子中端姚，容器寬為 400px晕粪，項目寬為100px。因為項目超過了容器空間渐裸，所以自動被縮小了巫湘。默認(rèn) flex-shrink 是 1，所有項目同等比例縮小成 80px橄仆。

右上剩膘，設(shè)置 flex-shrink，全部設(shè)置為 0盆顾，項目保存原來設(shè)置的寬度 100px怠褐，不縮小，所以溢出容器空間您宪。

右中奈懒，設(shè)置 flex-shrink 分別為 6、6宪巨、6磷杏、默認(rèn)、默認(rèn)捏卓，項目寬變成 70px极祸、70px、70px怠晴、95px遥金、95px，超出的 100px 分成 20 份蒜田，按比例縮小稿械。

右上，設(shè)置 flex-shrink 分別為 999冲粤、默認(rèn)美莫、默認(rèn)、默認(rèn)梯捕、默認(rèn)厢呵，項目寬變成 16px、96px傀顾、96px襟铭、96px、96px，可以看到這里就不按比例縮小的了蝌矛。

flex 項目的屬性：flex-basis

flex-basis 用于初始化每個項目占據(jù)主軸空間的尺寸（main size）。

.item {
  flex-basis: <length> | auto;
}

默認(rèn)值：flex-basis: auto , 自動檢測尺寸错英，如果項目有設(shè)置尺寸入撒，則取項目設(shè)置的值，否則根據(jù)項目內(nèi)容計算出尺寸椭岩。

可以像設(shè)置 width茅逮，height 一樣設(shè)置 flex-basis

flex 項目的屬性：flex

flex 是上面三個合并的簡寫。

.item {
  flex: <flex-grow> [<flex-shrink>] [<flex-basis>];
}

默認(rèn)值：flex: 0 1 auto; 后兩個參數(shù)為可選參數(shù)判哥。

這個屬性預(yù)定義了以下幾種簡寫形式：

• flex: initial ：等同于 flex: 0 1 auto献雅。默認(rèn)值。這里 flex-grow 為 0塌计， 所以項目默認(rèn)不會拉伸挺身，不會超出本身的 flex-basis 尺寸。flex-shrink 為 1 锌仅，所以項目可以縮小章钾，防止它們溢出。flex-basis 為 auto热芹，可以是手動設(shè)置的尺寸也可以自動根據(jù)內(nèi)容計算出尺寸贱傀。
• flex: auto：等同于 flex: 1 1 auto∫僚В可以拉伸府寒，可以縮小，自動計算項目尺寸报腔，一般情況下會自動拉伸填充滿整個容器株搔。
• flex: none： 等同于 flex: 0 0 auto。不能拉伸榄笙，不能縮小邪狞，直接使用獲取到項目的 flex-basis 尺寸。
• flex: <positive-number>：等同于 flex: <positive-number> 1 0 茅撞。positive-number 為正數(shù)帆卓，例如 flex: 1 等同于 flex: 1 1 0。

flex 項目的屬性：align-self

align-self 控制項目本身在交叉軸上的對齊方式米丘。優(yōu)先級高于 align-items剑令。align-items 是容器統(tǒng)一控制容器里的每個項目的對齊方式，align-self 則是項目控制項目本身的對齊方式拄查。

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

默認(rèn)值：align-self: auto; 吁津，繼承容器設(shè)置的 align-items 的值。也就是默認(rèn)是由容器設(shè)置 align-items 統(tǒng)一控制項目在交叉軸上的對齊方式。

除了比 align-items 多一個 auto 選項外碍脏，其他選項與 align-items 一致梭依。

.container {
  dispaly: flex;
  align-items: flex-start; // 容器控制所有項目頂部對齊排列
}
.item.four {
    align-self: flex-end; // 第四個項目控制底部對齊
}

image

flex 項目的屬性：order

order 用于控制項目在主軸上的排列順序。

.item {
 order: <number>;
}

默認(rèn)值： order: 0; 典尾，參數(shù)值正負(fù)數(shù)都可以役拴，全部項目按主軸方向依次排列。設(shè)置后钾埂，按數(shù)值大小河闰，從小到大排列。

image

五褥紫、小技巧

1. 解決 flex 布局使用 space-between 兩端對齊姜性，最后一行不對齊問題

image

這是一種常用的布局方式，但是最后一行大部分時候髓考，我們是希望他從左到右排列部念，而不是兩端對齊

解決方案：使用 after 偽元素，把寬設(shè)置成與 item 一樣

.conatainer::after {
  content: ""; 
  width: 50px;
  /* height: 50px; */ // 如果給偽元素設(shè)置高和背景色氨菇，可以看到它的作用印机。
  /* background-color: #eeeeee; */
}

image

原理是，使用 after 偽元素模擬了最后一個項目门驾，假裝多了一個項目射赛，占著最后一個位置。如果給偽元素設(shè)置高和背景色奶是，可以看到它的作用楣责。

但這個方法有個明顯的缺點，只適合每行三個項目聂沙。超過三個項目就不行了秆麸。

2. 解決 flex 布局的 space-evenly 兼容性問題

上面提到的 justify-content: space-evenly; 對齊方式，這個方式有個明顯的缺點及汉，就是兼容性較差沮趣。

當(dāng)使用的環(huán)境中需要兼容較多瀏覽器的時候，可以考慮以下方案坷随。

.container {
    display: flex;
    justify-content: space-between;
}
.container::after,
.container::before {
  content: '';
  display: block;
}

使用 after 偽元素房铭，在容器兩端模擬兩個長度為 0 的項目，就能實現(xiàn) evenly 同樣的效果温眉。

缺點是只適合一行的布局缸匪。

六、示例

圣杯布局

<header>header</header>
  <div id='main'>
    <article>article</article>
    <nav>nav</nav>
    <aside>aside</aside>
  </div>
<footer>footer</footer>
<style>
  body { font: 24px Helvetica; }
  #main {
    min-height: 500px;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-flow: row;
  }
  #main > article {
    margin: 4px;
    padding: 5px;
    border: 1px solid #cccc33;
    border-radius: 7pt;
    background: #dddd88;
    flex: 3 1 60%;
    order: 2;
  }
  #main > nav {
    margin: 4px;
    padding: 5px;
    border: 1px solid #8888bb;
    border-radius: 7pt;
    background: #ccccff;
    flex: 1 6 20%;
    order: 1;
  }
  #main > aside {
    margin: 4px;
    padding: 5px;
    border: 1px solid #8888bb;
    border-radius: 7pt;
    background: #ccccff;
    flex: 1 6 20%;
    order: 3;
  }
  header, footer {
    display: block;
    margin: 4px;
    padding: 5px;
    min-height: 100px;
    border: 1px solid #eebb55;
    border-radius: 7pt;
    background: #ffeebb;
  }
  /* 窄到已不足以支持三欄 */
  @media all and (max-width: 640px) {
    #main, #page {
      flex-direction: column;
    }
    #main > article, #main > nav, #main > aside {
      /* 恢復(fù)到文檔內(nèi)的自然順序 */
      order: 0;
    }
    #main > nav, #main > aside, header, footer {
      min-height: 50px;
      max-height: 50px;
    }
  }
</style>

image

參考文檔：MDN flex 布局文檔