1. 認識flexbox
彈性盒子是一種用于按行或按列布局元素的一維布局方法
目前特別在移動端可以說已經(jīng)完全普及;
在PC端也幾乎已經(jīng)完全普及和使用, 只有非常少數(shù)的網(wǎng)站依然在用浮動來布局;
長久以來，CSS 布局中唯一可靠且跨瀏覽器兼容的布局工具只有floats 和 positioning。
但是這兩種方法本身存在很大的局限性, 并且他們用于布局實在是無奈之舉;
2. flex布局的重要概念
開啟了 flex 布局的元素叫 flex container
flex container 里面的直接子元素叫做 flex item
當flex container中的子元素變成了flex item時, 具備以下特點:
- flex item的布局將受flex container屬性的設(shè)置來進行控制和布局;
- flex item不再嚴格區(qū)分塊級元素和行內(nèi)級元素;
- flex item默認情況下是包裹內(nèi)容的, 但是可以設(shè)置寬度和高度;
設(shè)置 display 屬性為 flex 或者 inline-flex 可以成為 flex container
- flex： flex container 以 block-level 形式存在
- inline-flex： flex container 以 inline-level 形式存在
3. flex布局的模型
4. flex相關(guān)的屬性
應用在 flex container 上的 CSS 屬性
- flex-flow
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
應用在 flex items 上的 CSS 屬性
- flex-grow
- flex-basis
- flex-shrink
- order
- align-self
- flex
5. flex-direction
flex-direction 決定了 main axis 的方向，有 4 個取值
row（默認值）、row-reverse、column、column-reverse
6. flex-wrap
flex-wrap 決定了 flex container 是單行還是多行
- nowrap（默認）：單行
- wrap：多行
- wrap-reverse：多行 (從最后一行開始沿著主軸方向排列)
7. flex-flow
flex-flow 屬性是 flex-direction 和 flex-wrap 的簡寫。
順序任何, 并且都可以省略;
8. justify-content
justify-content 決定了 flex items 在 main axis 上的對齊方式
- flex-start（默認值）：與 main start 對齊
- flex-end：與 main end 對齊
- center：居中對齊
image.png
- space-between：
flex items 之間的距離相等
與 main start、main end兩端對齊
- space-around：
flex items 之間的距離相等
flex items 與 main start、main end 之間的距離是 flex items 之間距離的一半
- space-evenly：
flex items 之間的距離相等
flex items 與 main start、main end 之間的距離 等于 flex items 之間的距離
9. align-items
align-items 決定了 flex items 在 cross axis 上的對齊方式
- normal：在彈性布局中，效果和stretch一樣
- stretch：當 flex items 在 cross axis 方向的 size 為 auto 時，會
自動拉伸至填充 flex container
- flex-start：與 cross start 對齊
- flex-end：與 cross end 對齊
- center：居中對齊
- baseline：與基準線對齊
10. align-content (只有在固定盒子有多余空間時候用)
align-content 決定了多行 flex items 在 cross axis 上的對齊方式，用法與 justify-content 類似
- stretch（默認值）：與 align-items 的 stretch 類似
- flex-start：與 cross start 對齊
- flex-end：與 cross end 對齊
- center：居中對齊
- space-between：
flex items 之間的距離相等
與 cross start、cross end兩端對齊
- space-around：
flex items 之間的距離相等
flex items 與 cross start、cross end 之間的距離是 flex items 之間距離的一半
- space-evenly：
flex items 之間的距離相等
flex items 與 cross start、cross end 之間的距離 等于 flex items 之間的距離
