者：EcbJS

轉發鏈接：https://blog.csdn.net/EcbJS/article/details/106466757

言

在css3 Flex技術出現之前制作網頁大多使用浮動（float）、定位（position）以及 顯示（display）來布局頁面，隨著互聯網快速發展，移動互聯網的到來，已無法滿足需求，它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現。

什么是 Flex？

Flex 是 Flexible Box 的縮寫，是 CSS3 中的一種新的布局模式，可以簡便、完整、響應式地實現各種頁面布局，當頁面需要適應不同的屏幕大小以及設備類型時非常適用。

目前，幾乎所有的瀏覽器都支持 Flex 布局，所以flex 是必須要掌握的知識，比float、position更重要。

基本概念

采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。

容器默認存在兩根軸，分別為水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置叫做 main start，結束位置叫做 main end；交叉軸的開始位置叫做 cross start，結束位置叫做 cross end。項目默認沿主軸排列。單個項目占據的主軸空間叫做 main size，占據的交叉軸空間叫做 cross size。如下圖所示：

你可以通過display: flex (塊級)或 display:inline-flex(行內塊級)使一個元素變成flex容器，一旦其元素被設置flex容器，其子元素的 float、clear 和 vertical-align 等屬性將失效。

flex 有以下這些屬性：

按照功能范圍可分為容器屬性和項目屬性。

容器的屬性

1、flex-direction

此屬性決定容器主軸排列方式，它有以下幾個值：

如下圖演示：

2、flex-wrap

flex-wrap 當子元素項超出容器時，設置其是否換行，有以下值：

默認如果不設置flex-wrap，當子元素在主軸方向總和超過容器大小，則其大小會變小，直到容器沒有多余的空間，如下演示：

如圖3即使子元素設置了寬度或高度，它仍然被擠壓，直到容器沒有多余空間，此時就會超出容器顯示。當主軸方向是垂直方向時一樣。

下面是flex-wrap換行的效果：

當主軸是水平方向時

當主軸是垂直方向時

3、flex-flow

flex-flow 是flex-direction 和 flex-wrap 兩個屬性的簡寫，也就是說它可以同時設置這2個屬性，語法如下：

flex-flow: flex-direction flex-wrap;

如下圖示例：

flex-flow: row nowrap

flex-flow: row wrap

flex-flow: column wrap

其它屬性依次類推，你可以試試相互組合。

4、justify-content

此屬性用來設置子元素項目在主軸上的對齊方式，它有以下幾個值：

如下圖演示的效果：

水平排列時

垂直排列時

5、align-items

此屬性和justify-content類似，區別是align-items 是這種子項目元素在交叉軸上的對齊方式，它有以下值：

效果如下：

這里注意，當值為baseline時，是基于文字的基線對齊的。

6、align-content

align-content 屬性比較抽象，它只有滿足以下條件下才能起作用：

1. 對父元素設置屬性display:flex;
2. 并且設置排列方式為水平排列 flex-direction:row;
3. 設置換行，flex-wrap:wrap;

align-content 只適用多行的flex容器（也就是flex容器中的子項不止一行時該屬性才有效果），它的作用是當flex容器在交叉軸上有多余的空間時，將子項作為一個整體進行對齊。不同取值的效果如下所示：

如下示例：

項目屬性

1、order

order 屬性用來設置項目在容器中出現的順序，您可以通過具體的數值來定義,如下圖示例：

子元素項目按照order的值從小到大排序。

2、align-self

align-self 屬性允許您為某個項目設置不同于其它項目的對齊方式，align-self 屬性和容器的align-items屬性一樣，它可以覆蓋容器的align-items 屬性的值。

如下示例：

如圖15中c方塊的對齊方式覆蓋了容器的align-items: center;

3、flex-grow

flex-grow屬性定義項目的放大比例，默認為0。

如上圖中其它方塊默認是flex-grow:0不放大。

如上圖方塊2占滿了剩余的空間，雖然讓設置了flex-grow:2；

如上圖當所有項目flex-grow:1時，則它們將等分剩余空間（如果有的話），這里即使你設置了其它的數值比如flex-grow:2，flex-grow:10結果都一樣等分。

如果其中一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。

4、flex-shrink

flex-shrink屬性和flex-grow相反，它是設置項目縮小比例。默認為1，如果空間不足，該項目將縮小。

如下所圖例，當子元素設置flex-shrink:1時，如果空間不足，該項目將等比縮小。

如下圖，當子元素設置flex-shrink:1時，但是其中c子項的flex-shrink:0時，在空間不足時c子項保持不變，其它項等比縮小。

同理當c項flex-shrink:2時，在空間不足時c項將比其它項目多縮小2倍，數值不同縮小比例不一樣，如下圖：

5、flex-basis

flex-basis屬性設置項目如何分配主軸上剩余的空間，值為 auto（默認值，表示自動）、inherit（表示從父元素繼承該屬性的值） 或者以具體的值加 "%"、"px"、"em" 等單位的形式。

flex-basis:auto 時：

flex-basis:100% 時：

flex-basis:100px 時：

• 注意它和width的區別，flex-basis只能在flex容器中使用，但width在任何塊級元素都可以。
• 同時設置width，又設置flex-basis，當flex-basis大于自身內容寬度時，不管width是否設置，flex-basis優先級高。
• 當flex-basis和width都小于自身內容寬度時，flex-basis和width哪個值大，寬度就是那個。
• 當flex-basis設置值小于自身內容寬度，而width大于自身寬度時，則寬度為自身內容寬度。

flex屬性

flex 屬性是 flex-grow、flex-shrink 和 flex-basis 三個屬性的簡寫，語法格式如下：

flex: flex-grow flex-shrink flex-basis;

如下示例：

最后

關于flex容器，其知識點比較多相對難易理解，它非常靈活，所以要活學活用，多加練習。通常flex會和rem一起使用，實現頁面自適應，常見的網頁布局比如以下：

關于網頁布局，以后會專門介紹，在這里不詳細說明了，感謝關注，學習愉快。

參考資料：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

https://www.runoob.com/w3cnote/flex-grammar.html

http://c.biancheng.net/css3/flex.html

https://www.w3school.com.cn/cssref/pr_flex.asp

言

flex布局在布局中用的很多，可以使用在pc端，也可以在小程序中使用，甚至可以代替float浮動，學好flex布局對我們的用處很大。

flex布局的重要性

1. flex布局可以設置控件的排列方向和順序。
2. flex布局可以設置各種各樣的對齊方式。
3. flex布局可以彈性的放大和縮小

flex布局的應用

先設計容器。

<view class="containers">
<view class="div1"></view>
<view class="div2"></view>
<view class="div3"></view>
</view>

在父控件上加上display:flex,就變成了css的彈性布局。

.containers{
  /* 加上他，變成彈性布局，將會水平排列 */
  display: flex;
  /* 控件的排列方向，默認是row，水平排列 */
  /* flex-direction: column; */
  /* 對齊方式.
  flex-start:起點對齊，
  flex-end:末尾對齊
  space-between:兩端對齊
  space-around:環繞對齊
   */
  justify-content: space-between;
  /* 相對于父控件的對齊方式
    flex-start:頂端對齊
    flex-end:末端對齊
    center:居中對齊
    baseline:文字基線對齊
  */
  align-items: flex-end;
  height: 200px;
  background: pink; 
}

子div的樣式如：

.div1{
  width: 50px;
  height: 50px;
  background-color: yellow;
  /* 在子控件上加入flex=1，將會平分屏幕的寬度 */
  /* flex: 1; */
  /* 該子組件將會填充剩余的寬度 */
  /* flex-grow: 1; */
}
.div2{
  width: 50px;
  height: 50px;
  background: blue;
  /* flex: 1; */
}
.div3{
  width: 50px;
  height: 50px;
  background: greenyellow;
  /* flex: 1; */
}

當子樣式中添加flex:1的時候，該資陽市將會把容器填充滿，如果每個子控件都加上flex，將會平分父容器。不會受到自身div寬度的限制。
如下圖為子組件都設為flex:1的情況。

如果子div沒有填滿屏幕的寬度，這時我們可以在子組件中設置 flex-grow: 1;來讓該子組件填充滿屏幕的寬度。如下圖所示，為黃色的子div加上了flex-grow:1,當為多個子div設置該屬性的時候，子div也會平分。

接下來設計父div，在父div上加**justify-content:**屬性，會給子組件設置對齊方式。

• flex-start:起點對齊

也可以設置align-items屬性來設置相對于父div的高度對齊方式。

• flex-start:頂端對齊

• baseline:文字基線對齊

文字基線對齊，是子div有文字的時候，文字在一條線上