/*
flex布局：
彈性盒布局，flex容器，子元素flex專案
預設兩根軸：水平軸和垂直交叉軸，專案預設沿主軸排列
注意，設為 flex 布局以後，子元素的float、clear和vertical-align屬性將失效。
*//*
一、容器的屬性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
*//*
1、flex-direction : 決定主軸方向（專案的排列方向）
row : 預設值，主軸水平，起點左端
row-reverse : 主軸水平，起點右端
column : 主軸垂直，起點上端
column-reverse : 主軸垂直，起點下端
*//*
2、flex-wrap : 各專案是否有換行
nowrap : 預設值，不換行
wrap : 換行
wrap-reverse : 換行，第一行在下方
*//*
3、flex-flow : 是flex-direction 和 flex-wrap 的簡寫 預設值 row wrap
*//*
4、justify-content : 定義專案在主軸上的排布方式
flex-start : 左對齊
flex-end : 右對齊
center : 居中
space-betwoon : 兩端對齊，專案之間間隔相等
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（預設值）：軸線佔滿整個交叉軸。
*//*
二、專案上的屬性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
*//*
1、order : 定義專案的排列順序。數值越小，越靠前，預設值 0
*//*
2、flex-grow : 定義專案放大比例。預設0，即如果存在剩餘空間，也不放大
如果所有專案flex-grow:1,則平分剩餘空間，按照佔比分空間
*//*
3、flex-shrink : 定義專案縮小比例。預設1，即空間不足，專案預設縮小
如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。
如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。
負值對該屬性無效
*//*
4、flex-basis : 定義了在分配多餘空間之前，專案佔據的主軸空間。
可以設為跟width或height屬性一樣的值固定px，專案佔據固定空間
*//*
5、flex : 是flex-grow、flex-shrink、flex-basis 簡寫，預設：0 1 auto，後兩個屬性可選值
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
*/
flex布局有關屬性整理
一 flex容器屬性有 flex direction 設定主軸方向，可設定的屬性值有 a.row 表示橫向排列，從左至右 b.row reverse 表示橫向排列，從右至左 c.column 表示縱向排列，從上至下 d.column reverse 表示縱向排列，從下至上排列 flex wrap 設...
Flex布局屬性學習整理
a.使用在容器上的六大屬性值 1.flex direction 2.flex wrap 3.flex flow 4.justify content 5.align items 6.align content 1.flex direction屬性決定主軸的方向，即專案的排列方式 有四個值可供選擇 ro...
Flex布局微整理
必記屬性 flex container 屬性 flex direction 方向 row 從左往右 預設一行一行展示 row reverse 從右往左 反向 column 從上往下 一列一列展示 column reverse 從下往上 反向 flex wrap 換行 wrap 換行 no wrap ...