flex頂層設計
1.在任何流動的方向上(包括上下左右)都能進行良好的布局
2.可以以逆序 或者 以任意順序排列布局
3.可以線性的沿著主軸一字排開 或者 沿著側軸換行排列
4.可以彈性的在任意的容器中伸縮大小
5.可以使子元素們在容器主軸方向上 或者 在容器側軸方向上 進行對齊
主軸和側軸
什么是主軸
什么是側軸
他們是如何切換的
首先每一根軸都包括 三個東西：維度、方向、尺寸
- 所謂的維度實際上就是意思就是子元素 橫著排還是豎著排(
x?軸 或?y?軸） - 方向 即排列子元素的順序 順序還是逆序
- 尺寸 即
width[height] ：?每一個子元素在主軸方向所占的位置的總和?如果主軸是水平的，那么尺寸就是父元素內所有item的outerWidth總和,如果主軸是垂直的，那么尺寸就是父元素的outerHeight
為了方便?flex-direction + flex-wrap?合并成了一個屬性?flex-flow
主側軸的切換十分簡單，當主軸設定的時候，它的垂直面，就默認被設定成了側軸
flex-flow:?row-reverse wrap-reverse
- 子元素是橫著排列的，主軸是水平的橫軸，側軸是豎直的縱軸
- 子元素是逆序并沿著主軸排列的，從右到左
- 子元素是換行的
- 子元素是逆序并沿著側軸排列的，從下到上
FFC (flex formatting context)
Flexbox 布局新定義了格式化上下文，類似 BFC（block formatting context）。有多類似呢？ 就是除了布局和一些細節不同以外的一切規則都和 BFC 是相同的。
注意?: 我所指的Flexbox 是指設置了?
display: flex;?或?display: inline-flex;的盒子。不是指單單設置了?display: flex;?的盒子。
例如，設置了?display: flex;?或?display: inline-flex的元素，和BFC一樣，不會被浮動的元素遮蓋，不會垂直外邊距坍塌等等。
而對于設置了?display: inline-flex?的盒子來說，我們可以類比?display: inline-box;行理解。即 一個被行列化后的 Flexbox。它不會獨占一行，但是可以設置寬和高。
但需要注意的是以下幾點細節，Flexbox 布局 和 Block 布局是有細微區別的
- Flexbox 不支持?
::first-line?和?::first-letter?這兩種偽元素 vertical-align?對 Flexbox 中的子元素 是沒有效果的float?和?clear?屬性對 Flexbox 中的子元素是沒有效果的，也不會使子元素脫離文檔流(但是對Flexbox 是有效果的！)- 多欄布局
（column-*）?在 Flexbox 中也是失效的，就是說我們不能使用多欄布局在Flexbox 排列其下的子元素（魚和熊掌不可得兼嘛） - Flexbox 下的子元素不會繼承父級容器的寬
flex item（flex 子元素）
CSS解析器會把 定義了?display: flex;?和?display: inline-flex;?的 Flexbox 下的子元素外部裝進一個看不見的盒子里，我們通過排列這些盒子來達到排序、布局、 伸縮的目的。
規范中把這種盒子 稱為?flex item，而子元素中包括了 標簽節點 以及 文本節點。標簽節點很容易理解，需要注意的是文本節點。
默認情況下，flex?會將?連續的文本節點?裝進 flex-item 之中，使文本可以和標簽節點一起排序和定位。
值得注意的是，空格也是文本節點，所以?white-space?會影響Flexbox 中的布局：
flex-item-size 如何計算的
item-size（尺寸）為主軸方向上item的?content?再加上自身的margin?、?border?和?padding?就是這個?item?的尺寸。
1. flex-basis 的優先級比 width[height]: 非auto; 高
如果子元素沒有內容和默認固定寬高，且設置了flex-basis。flex-item content以flex-basis來決定，無論width[height]?設置了多少。
(可理解為?flex-basis?比?width[height]: 非auto;的優先級高)
flex-basis的優先級比width[height]高，無論width[height]設置多少，flex-item content都以flex-basis來決定。
2.元素存在默認寬高
如果子元素有默認固定寬高（例如input?標簽）、并且設置了?flex-basis，那么它的?content以 固定寬高為下限，如果flex-basis?超過了固定寬高，那么flex-basis則成為其?content，如果flex-basis比固定寬高小，那么以固定寬高為?content。
3.元素存在 min-width[height] 或者 max-width[height]
如果flex-item?有min-width[min-height]?的限制，那么flex-item content按照?min-width?值為下限，如果?flex-basis?的值大于?min-width[min-height]?那么flex-item content以?flex-basis?計算。
如果flex-basis?的值小于?min-width[min-height]?那么flex-item content以min-width[min-height]
如果?min-width[min-height]?的值已經超出了容器的尺寸，那么即使設置了?flex-shrink。 CSS解析器也不會進行將這個item的 content shrink，而是堅持保留它的min-width[min-height]：
4.width[height]: auto; 優先級等于 flex-basis。
前面提到，如果給item同時設置了width[height]?和?flex-basis的話。flex-item content以flex-basis來決定。但是實際上默認的?width[height]: auto;?優先級是等于?flex-basis的。
CSS解析器對比兩者的值，兩者誰大取誰 作為item的基本尺寸，如果一個item沒有內容，flex-item content就會以flex-basis來決定。
但是如果item有了內容，且內容撐開的尺寸比flex-basis大，那么flex-item content就會以width[height]: auto;?來決定，且無法被 shrink。反之，如果比flex-basis小，flex-item content就會以flex-basis來決定
idth: auto;?內容長度比?flex-basis?大，則 flex-item content以內容長度來決定，且無法shrink
如果?flex-basis?的長度大于文字內容長度，那么flex-item content以?flex-basis?
Flexbox 布局很棒還是需要深入理解的
?
)
)
