簡介
Flex 布局（Flexible布局，彈性盒子）是在開發中常用的布局方式；
- 開啟了 flex 布局的元素叫 flex container
- flex container 里面的直接元素叫做 flex items
- 設置 display 屬性為 flex 或者 inline-flex 的元素可以成為 flex container
- 屬性設置為 flex ,flex container 以 black-level 的形式存在
- 屬性設置為 inline-flex ,flex container 以 inline-level 的形式存在
Flex 布局模型
應用在 flex container 上的 CSS 屬性
flex-direction
flex items 默認都是沿着 main axis(主軸) 從 main start 開始往 main end 方向排布；
flex-direction 決定了 main axis 的方向，有4個值：
row(默認值), row-reverse, column, column-reverse
flex-wrap
flex-wrap 決定了 flex container 是單行還是多行
- nowrap(默認)：單行
- wrap: 多行
- wrap-reverse: 多行(對比 wrap, cross start 與 cross end 相反)
flex-flow
flex-flow 是 flex-direction || flex-wrap 的簡寫
- 比如
flex-flow: row wrap就等價於flex-direction: row;flex-wrap: wrap;
justify-content
justify-content 決定了 flex items 在 main axis 上的對齊方式;
- flex-start (默認值)：與 main start 對齊；
- flex-end: 與 main-end 對齊；
- center: 居中對齊；
- space-between：
- flex items 之間的距離相等；
- 與main start, main end 兩端對齊；
- space-around:
- flex items 之間的距離相等；
- flex items 與 main start, main end 兩端的距離是 flex items 之間距離的一半；
align-items
align-items 決定了 flex items 在 cross axis 上的對齊方式；
- stretch(默認值)：當 flex items 在 cross axis 方向的 size 為 auto 時，會自動拉伸至 flex container
- flex-start: 與 cross start 對齊
- flex-end： 與 cross end 對齊
- conter: 居中對齊
- baseline: 與基准線對齊
align-content
align-content 決定了多行 flex items 在 cross axis 上的對齊方式，用法與 justify-content 類似；
- stretch(默認值)：與 align-item 的 stretch 類似
- flex-start: 與 cross start 對齊
- flex-end: 與 cross end 對齊
- conter: 居中對齊
- space-between:
- flex items 之間的距離相等；
- flex items 與 main start, main end 兩端對齊；
- space-around:
- flex items 之間的距離相等；
- flex items 與 main start, main end 之間的距離是 flex items 之間距離的一半；
應用在 flex items 上的 CSS 屬性
order
order 決定了 flex items 的排布順序
- 默認值是 0;
- 可以設置任意整數 (正整數，負整數, 0)，值越小越排在前面;
flex-grow
flex-grow 決定了 flex-items 如何擴展
- 可以設置任何非負數數字(正小數，正整數，0)，默認值是0；
- 當 flex container 在 main axis 方向上有剩余 size 時，flex-grow 屬性才有效；
- 如果所有 flex items 的 flex-grow 總和 sum 超過 1，每個 flex item 擴展的 size 為：
flex container 的剩余 size * flex-grow / sum; - 如果所有 flex items 的 flex-grow 總和不超過 1，每個 flex item 擴展的 size 為:
flex container 的剩余 size * flex-grow - flex items 擴展后的最終 size 不能超過 max-width\max-height
flex-shrink
flex-shrink 決定了 flex items 如何收縮；
- 可以設置任意非負數字（正小數、正整數、0），默認值是 1;
- flex items 在 main axis 方向上超過了 flex container 的 size , flex-shrink 屬性才會有效
每個 flex items 收縮的 size 為： - flex items 超出 flex container 的 size * 收縮比例 / 所有 flex items 的收縮比例之和
(詳解)如果所有 flex items 的 flex-shrink 總和超過 1 ，每個 flex item 收縮的 size 為： - flex items 超出 flex container 的 size * 收縮比例 / 所有 flex items 的收縮比例之和
(詳解)如果所有 flex items 的 flex-shrink 總和 sum 不超過 1 ，每個 flex item 收縮的 size 為 - flex items 超出 flex container 的 size * sum * 收縮比例 / 所有 flex items 的收縮比例之和
收縮比例 = flex-shrink * flex item 的 base size - base size 就是 flex item 放入 flex container 之前的 size
- flex items 收縮后的最終 size 不能小於 min-width \ min-height
flex-basis
flex-basis 用來設置 flex items 在 main axis 方向上的 base size
- auto (默認值)、content ：取決於內容本身的 size
決定 flex items 最終 base size 的因素，從優先級高到低
- max-width \ max-height \ min-width \ min height
- flex-basis
- width\height
- 內容本身的 size
flex
flex 是 flex-grow flex-shrink? || flex-basis 的簡寫
- 默認值是 0 1 auto
- none: 0 0 auto
align-self
flex-items 可以通過 align-self 覆蓋 flex container 設置的 align-items;
- auto(默認值): 遵從 flex container 的 align-items 設置;
- stretch, flex-start, flex-end, center, baseline 效果和 align-items 效果一致;
總結：
- 應用在 flex container 上的屬性
1. flex-direction: 設置主軸(main axis)的方向
2. flex-warp: 設置 flex-items 是否可以換行
3. flex-flow: flex-direction flex-warp 屬性連寫
4. justify-content: 設置 flex items 在主軸(main axis)上的對齊方式
5. align-items: 設置 flex items 在交叉軸上的對齊方式(一般針對單行)
6. align-content: 設置 flex items 在交叉軸上的對齊方式(一般針對多行)- 應用在 flex items 上的屬性
1. order: 設置 flex items 的排列順序
2. flex-grow: 決定了 flex items 在主軸方向上如何擴展
3. flex-shrink: 決定了 flex items 在主軸方向上如何收縮
4. flex-basis: 設置 flex items 在主軸上的 base size
5. flex: flex-grow flex-shrink? || flex-basis 連寫
6. align-self: 允許 flex items 覆蓋 flex-container 設置的 align-items 屬性