flex-direction：決定主軸的方向，決定子元素垂直或水平排列
flex-direction： row ，row-reser ， column ， column-reverse；
row （預設）// 水平排列，從左至右
row-reverse // 水平排列，從右至左
column // 垂直排列，從上至下
column-reverse // 垂直排列，從下至上。
justify-content：flex-start ， flex-end ， center ， space-between ， space-around;
flex-start （預設）// 子元素會往左布局，類似於 float：left 效果
flex-end // 子元素會往右布局，類似於 float：right
center // 子元素居中
space-between // 兩端對齊，子元素間隔都相等
space-around // 子元素左右留一定間隔（每個元素間隔相等，不會像 margin一樣會覆蓋）
flex-wrap: nowrap ， wrap ， wrap-reverse;
nowrap(預設) // 不換行
wrap // 第一行在上方
wrap-reverse // 第一行在下方
align-items: flex-start ， flex-end ， center ， baseline ， stretch;
flex-start // 交叉軸起點對齊（靠左 ，向上方邊緣對齊）
flex-end // 交叉軸重點對齊（靠左 ，向下方邊緣對齊）
center // 交叉軸重點對齊（靠左，垂直居中 ）
baseline // 子元素文字的基線對齊
stretch // 預設值。子元素被拉伸以適應容器（靠左，只有當子元素的高度為auto或未設定時才會被拉伸）
align-content: flex-start ， flex-end ， center ， space-between ， space-around ， stretch;
flex-start：與交叉軸的起點對齊。(靠左 ，向上方對齊)
flex-end：與交叉軸的終點對齊。(靠左 ，向下方對齊)
center：與交叉軸的中點對齊。（靠左 ，垂直對齊）
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線佔滿整個交叉軸。（元素位於容器的中心。各行向彈性盒容器的中間位置堆疊。
）
flex布局中的flex屬性詳解
一 理論 display flex 容器屬性 flex direction，flex wrap，flex flow，justify content，align items，align content 專案的屬性 order，flex grow，flex shrink，flex basis，flex，...
關於彈性布局flex屬性詳解
flex 復合屬性,設定或檢索彈性盒模型物件的子元素如何分配空間。由以下三個屬性組成 flex grow 用來指定擴充套件比例，即剩餘空間是正值時此flex子項相對於flex容器裡其他flex子項能分配到空間比例，在flex屬性中該值如果被省略則預設為1 flex shrink 用來指定收縮比例，即...
display的flex屬性使用詳解
flex的相容性在pc端還算闊以，但是在移動端，那就呵呵了。今天我們只是學習學習，忽略一些不重要的東西。首先flex的使用需要有乙個父容器，父容器中有幾個items.父容器 container 屬性 display flex flex塊級，inline flex 行內快 justify conten...