1.Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性
2.任何一個容器都可以用flex布局（注意，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效）

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

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

5.容器的屬性有6個

#1. flex-direction作用是決定主軸的方向.box {flex-direction: row | row-reverse | column | column-reverse;}有4個值row（默認值）：主軸為水平方向，起點在左端。row-reverse：主軸為水平方向，起點在右端。column：主軸為垂直方向，起點在上沿。column-reverse：主軸為垂直方向，起點在下沿 # 2.flex-wrap屬性flex-wrap屬性定義，如果一條軸線排不下，如何換行。.box{flex-wrap: nowrap | wrap | wrap-reverse;}有3個值nowrap（默認）：不換行。wrap：換行，第一行在上方。wrap-reverse：換行，第一行在下方。 # 3.flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形

式，

默認值為row nowrap

# 4.justify-content屬性

justify-content屬性定義了項目在主軸上的對齊方式.box {justify-content: flex-start | flex-end | center | space-between | space-around;}它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右flex-start（默認值）：左對齊flex-end：右對齊center： 居中space-between：兩端對齊，項目之間的間隔都相等。space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。# 5.align-items屬性定義項目在交叉軸上如何對齊。.box {align-items: flex-start | flex-end | center | baseline | stretch;}

border-bottom設置完成后，想要開頭的一段不需要，可以設定一個空的子元素，高度超過它，覆蓋掉

總結

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

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