flex布局是一種彈性布局。布局樣式比較靈活，大多數情況下可以替代float，而且不會脫離文件裡流。
flex中定義了兩個軸線，乙個主軸乙個副軸，這個概念你可以想想螢幕座標系（x軸向右，y軸向下），flex的軸線角色可以調換而且方向也可以變。
屬性：1。flex-direction ：這個屬性決定了flex主軸的方向。
取值：row （向右）|row-reverse（向左） |column（向下） |column-reverse（向上）。
2。flex-wrap : 這個屬性決定了flex的子元素在排滿了一行或一列（ if flex-direction is column or column-reverse
）後，第二行的顯示方式。
取值：nowrap （不換行） |wrap （換行，第二行出現在第一行下方） |wrap-reverse （換行，第二行出現在第一行上方） ;
3。justify-content:：這個屬性決定了flex子元素的排列方式，（現在假設主軸方向自左向右（flex-direction:row））
flex-start （自左向右排列） | flex-end （自右向左排列） | center （居中，類似text-align:center） | space-between (兩端對齊，第乙個元素的左邊和最後乙個元素的右邊不會留出空白) | space-around（均勻分布，第乙個元素的左邊和最後乙個元素的右邊會留出空白）
（上圖摘自阮一峰大佬的教程）
4。align-items：專案在副軸上的排列方式。(現在假設副軸方向自上而下)
取值：flex-start （子元素對齊父元素上邊框） | flex-end（子元素對齊父元素下邊框） | center（垂直居中，這個常用） | baseline（子元素的文字的第一行高度位置對齊） | stretch （子元素高度會和父元素一樣高） ;
flex屬性取值
第一種情況flex屬性不寫 flex屬性預設是0 1 auto flex grow為0，則存在剩餘空間也不放大 flex shrink為1，則空間不足該專案縮小 flex basis為auto，則該專案本來的大小 原始 parent parent div item 1 item 2 style cl...
flex布局的屬性
flex布局的核心概念是軸和容器，容器包括外層的父容器和內層的子容器，軸包括主軸 預設水平 和交叉軸 預設垂直 一 開啟flex布局 父容器設定屬性值 display flex 若父容器為行內元素 display inline flex webkit核心的瀏覽器 display webkit fle...
Flex布局常用的一些屬性及解釋
下面乙個乙個進行說明 設定子項在側軸上的排列方式 並且只能用於子項出現 換行 的情況 多行 在單行下是沒有效果的。下面來詳細記錄 flex 屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。itemalign self 屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋 align item...