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 布局很棒還是需要深入理解的

?

轉載于:https://www.cnblogs.com/zhouyideboke/p/11327640.html

總結

以上是生活随笔為你收集整理的对flex深入研究一点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。