flex布局：

flex布局是繼標準流布局、浮動布局、定位布局后的第四種布局方式。這種方式可以非常優雅的實現子元素居中或均勻分布，甚至可以隨著窗口縮放自動適應。flex布局在瀏覽器中存在一定的兼容性（具體參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7。但是在小程序中，是完全兼容flex布局的，并且微信官方也是推薦使用flex布局的。下面就來詳細的講下flex布局。

一個小例子：

看以下代碼：

<view class='outter'><view class='inner'>1</view><view class='inner'>2</view> </view> .outter{display: flex;justify-content: space-between;width: 300px;height: 200px;background: pink; }.outter .inner{background: gray;width: 100px;height: 100px; }

最后的效果圖：

基本概念：

彈性容器：包含著彈性項目的父元素。通過設置 display 屬性的值為 flex 或 inline-flex 來定義彈性容器。

彈性項目(Flex item)：彈性容器的每個子元素都稱為彈性項目。彈性容器直接包含的文本將被包覆成匿名彈性項目。也可以稱為子容器。

軸(Axis)：每個彈性框布局包含兩個軸。彈性項目沿其依次排列的那根軸稱為主軸(main axis)。垂直于主軸的那根軸稱為側軸(cross axis)。

方向(Direction)：可以通過flex-direction來確定主軸和側軸的方向。

設置在主軸上的排列方式：

默認情況下，主軸的方向是從左到右。在主軸方向上，可以通過justify-content屬性來設置他們的排列方式。排列方式有以下幾種：

flex-start：項目靠近父盒子的左側。默認采用的就是這種排列方式。示例圖如下：

flex-end：項目靠近父盒子的右側。

center：所有項目會挨在一起在父盒子的中間位置。

space-around：項目沿主軸均勻分布，位于首尾兩端的子容器到父容器的距離是子容器間距的一半。

space-between：項目沿主軸均勻分布，位于首尾兩端的子容器與父容器緊緊挨著。

space-evenly：項目在主軸上均勻分布，收尾兩端的自容器到父容器的距離跟自容器間的間距是一樣的。

設置在側軸上的排列方式：

默認情況下，側軸的方向是從上到下。在側軸方向上，可以通過align-items屬性來設置他們的排列方式。排列方式有以下幾種：

flex-start：起始端對齊。默認就是這種對齊方式。

flex-end：末尾段對齊。

center：中間對齊。

stretch：如果項目沒有設置高度。那么子容器沿交叉軸方向的尺寸拉伸至與父容器一致。比如我們將.inner的高度屬性去掉，代碼如下：

.outter .inner{background: gray;width: 100px;/* height: 100px; */border: 1px solid #ccc; }

效果圖為：

baseline：基線對齊，這里的 baseline 默認是指首行文字，所有子容器向基線對齊，交叉軸起點到元素基線距離最大的子容器將會與交叉軸起始端相切以確定基線。比如我們把代碼改成如下：

<view class='outter'><view class='inner'><view style='margin-top:10px;background:#eee;'>hello</view></view><view class='inner'>2</view> </view>

然后wxss文件為：

.outter{display: flex;align-items: baseline;width: 300px;height: 200px;background: pink; } .outter .inner{...}

那么效果圖為：

更換主軸和側軸方向

主軸默認的方向是從左到右，側軸的方向默認是從上到下，當然也可以進行修改。可以通過flex-direction進行修改。可以修改的參數為以下：

row：默認屬性。從左到右。

row-reverse：從右到左。
.

column：從上到下。
.

column-reverse：從下到上。
.

換行

默認情況下，元素個數如果超過一定數量，那么在一行當中就排列不下。此時flex默認的處理方式是壓縮元素，使其能在一行中排列下來。比如以下代碼：

<view class='outter'><view class='inner'>1</view><view class='inner'>2</view><view class='inner'>3</view><view class='inner'>4</view> </view> .outter{display: flex;width: 300px;height: 200px;background: pink; }.outter .inner{background: gray;width: 100px;height: 100px;border: 1px solid #ccc; }

那么會把這四個元素擠壓在一行中。即使給元素設置了寬度也沒有用的。效果圖如下：

可以通過flex-wrap來改變排列的方式。可以設置的屬性如下：

nowrap：不換行。默認的。
.

wrap：換行。
.

wrap-reverse：換行，但是第一行會在下面。
.

align-content屬性

在排列中，如果有多行，那么這個屬性是設置多行之間的排列方式。可以通過align-content屬性來確定排列的方式。可以設置以下值。

flex-start：從上往下排列。示例代碼如下：

.outter{ display: flex; flex-wrap: wrap; align-content: flex-start; width: 300px; height: 300px; background: pink; }

2. flex-end：末尾段對齊。效果圖如下：

center：中點對齊。效果圖如下：

space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。效果圖如下：

space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。效果圖如下：

6. stretch：默認方式，如果沒有給元素設置高度，那么會占滿整個交叉軸。

.outter .inner{ background: gray; width: 100px; /* height: 100px; */ border: 1px solid #ccc; box-sizing: border-box; }

效果圖如下：

元素（子容器）的相關屬性

flex-basis：
定義了在分配多余空間之前，項目占據的主軸空間，瀏覽器根據這個屬性，計算主軸是否有多余空間。

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

默認值：auto，即項目本來的大小, 這時候 item 的寬高取決于 width 或 height 的值。

當主軸為水平方向的時候，當設置了 flex-basis，項目的寬度設置值會失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能發揮效果。

當 flex-basis 值為 0 時，是把該項目視為零尺寸的，故即使聲明該尺寸為 140px，也并沒有什么用。
當 flex-basis 值為 auto 時，則跟根據尺寸的設定值(假如為 100px)，則這 100px 不會納入剩余空間。

flex-grow：
設置元素是否需要擴大的比例。默認值為0，即如果存在剩余空間，也不放大。比如有以下代碼：

<view class='outter'><view class='inner inner1'>1</view><view class='inner inner2'>2</view> </view>

wxss代碼為：

.outter{display: flex;width: 300px;height: 300px;flex-wrap: wrap;background: pink; }.outter .inner{background: gray;width: 100px;height: 100px;border: 1px solid #ccc;box-sizing: border-box; }.outter .inner1{flex-grow: 2; }.outter .inner2{flex-grow: 1; }

效果圖為：

因為兩個元素分別占了2份，1份，所以第一個元素是占據了整個容器寬度的2/3，第二個元素占據了整個容器寬度的1/3。
另外，如果設置flex-grow為0，那么他的寬度將會保持為設置的寬度，如果寬度沒有設置，那么將根據他的子元素來保留寬度。假如代碼為：

12

wxss代碼為：

.outter .inner1{flex-grow: 0; }.outter .inner2{flex-grow: 1; }

效果圖為：

如果把inner1的width刪掉，那么效果圖為：

flex-shrink屬性：

定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。比如有以下代碼：

1234

wxss的代碼如下：

.outter{display: flex;width: 300px;height: 300px;background: pink; }.outter .inner{background: gray;width: 100px;height: 100px;border: 1px solid #ccc;box-sizing: border-box; }.outter .inner2{flex-shrink: 0; }

效果圖為：

因為給inner2設置了flex-shrink為0，所以即使在空間不夠的情況下，他也不會被壓縮。

flex屬性：

flex屬性是flex-grow flex-shrink flex-basis三個屬性的簡寫。假設以上三個屬性同樣取默認值，則 flex的默認值是0 1 auto。

關于flex的取值，有以下幾種方式：

auto：等價于1 1 auto。也就是允許增長，允許縮小，寬度為自動。

none：等價于0 0 auto。也就是不允許增長，不允許縮小，寬度為自動。

非負數字：這個數字表示的是flex-grow的值，flex-shrink為1，表示允許縮小，flex-basis為0%。可以認為他就是把剩余的空間進行填充。比如以下代碼是等價的：

.item {flex: 1;}.item {flex-grow: 1;flex-shrink: 1;flex-basis: 0%;}

0：對應的三個值分別為0 1 0%。比如以下代碼是等價的：

.item {flex: 0;} .item {flex-grow: 0;flex-shrink: 1;flex-basis: 0%; }

長度或者百分比：則這個值視為flex-basis的值，而flex-grow為1，flex-shrink為1。比如以下代碼是等價的：

.item-1 {flex: 0%;} .item-1 {flex-grow: 1;flex-shrink: 1;flex-basis: 0%; }.item-2 {flex: 24px;} .item-2 {flex-grow: 1;flex-shrink: 1;flex-basis: 24px; }

兩個非負數字：分別視為flex-grow和flex-shrink的值，flex-basis取0%，如下是等同的：

.item {flex: 2 3;} .item {flex-grow: 2;flex-shrink: 3;flex-basis: 0%; }

一個非負數字和一個長度或百分比：則分別視為 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {flex: 11 32px;} .item {flex-grow: 11;flex-shrink: 1;flex-basis: 32px; }

更多關于flex布局請參考：

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

https://zhuanlan.zhihu.com/p/25303493

總結

以上是生活随笔為你收集整理的CSS弹性盒子布局flex的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。