目錄

1.彈性盒子模型可以以任意父容器為flex模型

2.他的布局位置可以在父容器中或在自身屬性中

3.flex布局的優(yōu)點(diǎn)

1.彈性盒子模型可以以任意父容器為flex模型

2.他的布局位置可以在父容器中或在自身屬性中

父容器：

（1）flex-direction 屬性：屬性決定主軸的方向（即項(xiàng)目的排列方向）

屬性值：

row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。row-reverse：主軸為水平方向，起點(diǎn)在右端column：主軸為垂直方向，起點(diǎn)在上沿column-reverse：主軸為垂直方向，起點(diǎn)在下沿

（2）flex-wrap屬性默認(rèn)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

屬性值：

nowrap（默認(rèn)）：不換行。wrap：換行，第一行在上方。wrap-reverse：換行，第一行在下方。

（3）flex-flow屬性：flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap

（4）justify-content屬性：定義了項(xiàng)目在主軸上的對齊方式。（水平方向）

屬性值：

flex-start（默認(rèn)值）：左對齊flex-end：右對齊center： 居中space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。space-between：兩端對齊，項(xiàng)目之間的間隔都相等。

（5）align-items屬性定義項(xiàng)目在交叉軸上如何對齊。（垂直方向）

屬性值:

flex-start：交叉軸的起點(diǎn)對齊。flex-end：交叉軸的終點(diǎn)對齊center：交叉軸的中點(diǎn)對齊baseline: 項(xiàng)目的第一行文字的基線對齊tretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度

（6）align-content屬性：定義了多根軸線的對齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。

屬性值

flex-start：與交叉軸的起點(diǎn)對齊。flex-end：與交叉軸的終點(diǎn)對齊。center：與交叉軸的中點(diǎn)對齊。space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。（height: auto時(shí)有效）

作為自身屬性：

(1)order屬性（排序）

定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。

(2)flex屬性 設(shè)置彈性盒子的子元素如何分配空間。

flex:6; ?/* 占6份*/flex:0 25%結(jié)合父元素的flex-wrap屬性進(jìn)行響應(yīng)式分配

(3)margin屬性（對齊）

設(shè)置"margin:auto"值，使得彈性子元素在兩上軸方向上完全居中

3.flex布局的優(yōu)點(diǎn)：

flex布局可以控制布局內(nèi)元素是膨脹到整個(gè)父元素還是保持原本大小，是從左往右還是從右往左還是居中。兩條軸線，四個(gè)維度，還是彈性的，這就使得用起來得心應(yīng)手

總結(jié)

以上是生活随笔為你收集整理的flex弹性盒子模型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。