注意事項

1.設為Flex布局之后，子元素的float，clear和vertical-align屬性都講失效 2.采用Flex布局的元素，稱為Flex容器（Flex container），所有的子元素成為容器成員，稱為Flex項目（Flex item） 3.容器默認存在兩根軸：水平的主軸和垂直的交叉軸 4.主軸的開始位置叫做main start，結束位置叫做main end 5.交叉軸的開始位置叫做cross start，結束位置叫做cross end 6.單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size

容器的屬性

1.flex-direction:決定主軸的方向（即子項目的排列方向）

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

2.flex-wrap:換行

nowrap(默認)：不換行 wrap:換行，第一行在上方 wrap-reverse:換行，第一行在下方

3.flex-flow:是flex-direction和flex-wrap屬性的簡寫

4.justify-content：定義了項目在主軸上的對齊方式

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

5.align-items：定義項目在交叉軸上如何對齊

flex-start：交叉軸的起點對齊。 flex-end：交叉軸的終點對齊。 center：交叉軸的中點對齊。 baseline: 項目的第一行文字的基線對齊。 stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

6.align-content：定義多根軸線的對齊方式（一根軸線不生效）

flex-start：與交叉軸的起點對齊。 flex-end：與交叉軸的終點對齊。 center：與交叉軸的中點對齊。 space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。 space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。 stretch（默認值）：軸線占滿整個交叉軸。

子項目屬性

1.order：定義項目的排列順序。數值越小，排列越靠前，默認為0

5.flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } 該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。 建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。

6.align-self屬性：定義單個項目的對齊方式，可以覆蓋align-items屬性

flex-start：交叉軸的起點對齊。 flex-end：交叉軸的終點對齊。 center：交叉軸的中點對齊。 baseline: 項目的第一行文字的基線對齊。 stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

針對父級容器的設置
display:flex

flex-wrap:是否換行 flex-direction:子項的排列方向 justify-content:子項在水平方向的排列 align-content:多行子項在水平方向的排列 align-items:統一設置單行子項在水平方向的排列

針對子項的設置
flex:設置子項的比例關系
flex:1
order:設置子項在兄弟間的排列順序
align-self:單獨設置每個子項在垂直方向的排列

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

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

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