用display:flex或inline-flex來生成flex布局(寫在父元素中)預設使子元素橫向排列
容器屬性都寫在父元素中，如:要操作div下a標籤的位置，flex屬性都寫在div中
容器屬性(div(父元素))
1.flex-direction 方向
2.flex-wrap 換行
3.flex-flow(1,2的簡寫)
4.justifl-content 橫向對齊方式
5.align-items 豎向對齊方式
6.align-content 多條軸對齊方式
column-count:4 一列4個子元素
flex-direction:row 橫向排列
row-reverse 橫向反向排列
column 豎向排列
column-reverse 豎向反向排列
justify-content:flex-start靠左布局
flex-end 靠右布局
center居中
space-between兩邊對齊
space-around間隔相同
space-evenly每個元素平局分
flex-wrap:wrap 超出容器後換行排列
nowrap 超出後不換行(預設)
wrap-reverse 超出後從右開始排列
align-items:stretch 拉伸
flex-start 上端對齊
flex-end 下端對齊
center 垂直居中
baseline 文字對齊
align-content:flex-start 頭部對齊
flex-end 下部對齊
center 居中對齊
space-between 兩端對齊
space-around 間隔相同
stretch 填充
專案屬性(div下的子元素)
1.order
2.flex-grow
3.flex-shrink
4.flex-basis
5.flex(2,3,4的簡寫)
6.align-self
多個子元素 flex:3 寬各佔三份
●order:number 專案排列順序，數字越小越靠前，預設為0
●flex-grow:number 剩餘空間按比例分配放大，預設為0，即有容器有剩餘空間時該專案不放大
●flex-shrink:number 專案的縮小比例，預設為1，即容器空間不足時，該專案縮小
●align-self:center 居中 脫離總體對齊方式單獨設定屬性
●flex-basis:100px 最小100px，如果內容過長，width會自適應增大。（如果內容是英文單詞(單個單詞無空格)或數字，且flex-basis和width同時使用時，採用最大值，且flex-basis自適應無效）
總結 Flex布局
網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案，基於 盒狀模型 依賴 display 屬性 position 屬性 float 屬性。它對於那些特殊布局非常不方便，比如，垂直居中 就不容易實現。任何乙個容器都可以指定為 flex 布局。行內元素也可以使用 flex 布局。bo...
flex 布局總結
flex 容器的屬性 flex direction 主軸方向 justify content 主軸上 item 的對齊方式 align items 交叉軸上 item 的對齊方式 align content 多根軸上的對齊方式，若只有一根軸，該屬性則不起作用 flex wrap 如何換行item 屬...
flex布局總結
以下6屬性設定在容器上 1.flex direction 決定主軸方向 2.flex warp 決定一排放不下，如何換行 3.flex flaw 1和2兩屬性的合併寫法 4.justify content 定義專案在主軸上的對齊方式 5.align items 定義專案在交叉軸的對齊方式 6.ali...