Flex處理邏輯

Flex簡介

由兩條軸組成的容器，類似初中數學的直角座標系

主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end

Flex基本屬性

flex-direction（主軸的方向【橫豎都能定義成主軸】）

- row - 從左到右
- row-rewerse - 從右到左
- column - 從上到下
另一個同理

.box { flex-direction: row | row-reverse | column | column-reverse; }

flex-wrap（如何換行）

- nowrap - 不換行
- wrap - 換行
- wrap-reverse - 降序排序換行，第一行在最下方

.box{ flex-wrap: nowrap | wrap | wrap-reverse; }

flex-flow（以上兩屬性的簡寫）

.box { flex-flow: <flex-direction> || <flex-wrap>; }

Flex對齊方式

justify-content（在主軸上的對齊方式【direction設定的才是主軸】）

- flex-start（預設值）：主軸開始位置對齊（假設主軸為row：左對齊，假設主軸為column：頂端對齊）
- flex-end：主軸結束位置對齊（假設主軸為row：右對齊，假設主軸為column：底端對齊）
- center： 主軸中間位置對齊（假設主軸為row：水平居中，假設主軸為column：垂直居中）
- space-between：兩端對齊，專案之間的間隔都相等。
- space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
 

.box { justify-content: flex-start | flex-end | center | space-between | space-around; }

align-items（在次軸【又叫交叉軸】上的對齊方式）

- flex-start：交叉軸開始位置對齊。
- flex-end：交叉軸結束位置對齊。
- center：交叉軸中間位置對齊。
- baseline: 元素第一行文字底端【類似下劃線】為基線做對齊。
- stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。

.box { align-items: flex-start | flex-end | center | baseline | stretch; }

align-content（多根軸線的對齊方式）

因為軸線是按照主軸依次排下的，所以可以將軸線簡單的理解為次軸【又叫交叉軸】

- flex-start：與交叉軸的起點對齊。
- flex-end：與交叉軸的終點對齊。
- center：與交叉軸的中點對齊。
- space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
- space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch（預設值）：軸線佔滿整個交叉軸。

元素基本屬性

order（元素排序）

數值越小越靠前

.item { order: <integer>; }

align-self - 對齊樣式覆蓋

預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

元素縮放屬性

flex-grow - 放大

預設為0,就算有剩餘空間也不放大 其他數值，按照所有數值總和的比例增大

flex-shrink - 縮小

預設為0,就算有剩餘空間也不縮小 其他數值，按照所有數值總和的比例縮小

flex-basis - 未縮放時固定的大小（大多沒啥用）

固定大小，預設值auto，即與原大小相同

.item { flex-basis: <length> | auto; /* default auto */ }

flex - 以上三個的簡寫

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }