flex頂層設(shè)計(jì)

1.在任何流動(dòng)的方向上(包括上下左右)都能進(jìn)行良好的布局

2.可以以逆序 或者 以任意順序排列布局

3.可以線性的沿著主軸一字排開 或者 沿著側(cè)軸換行排列

4.可以彈性的在任意的容器中伸縮大小

5.可以使子元素們?cè)谌萜髦鬏S方向上 或者 在容器側(cè)軸方向上 進(jìn)行對(duì)齊

主軸和側(cè)軸

什么是主軸

什么是側(cè)軸

他們是如何切換的

首先每一根軸都包括 三個(gè)東西：維度、方向、尺寸

• 所謂的維度實(shí)際上就是意思就是子元素 橫著排還是豎著排(x?軸 或?y?軸）
• 方向 即排列子元素的順序 順序還是逆序
• 尺寸 即width[height] ：?每一個(gè)子元素在主軸方向所占的位置的總和?如果主軸是水平的，那么尺寸就是父元素內(nèi)所有item的outerWidth總和,如果主軸是垂直的，那么尺寸就是父元素的outerHeight

為了方便?flex-direction + flex-wrap?合并成了一個(gè)屬性?flex-flow
主側(cè)軸的切換十分簡(jiǎn)單，當(dāng)主軸設(shè)定的時(shí)候，它的垂直面，就默認(rèn)被設(shè)定成了側(cè)軸
flex-flow:?row-reverse wrap-reverse

• 子元素是橫著排列的，主軸是水平的橫軸，側(cè)軸是豎直的縱軸
• 子元素是逆序并沿著主軸排列的，從右到左
• 子元素是換行的
• 子元素是逆序并沿著側(cè)軸排列的，從下到上

FFC (flex formatting context)

Flexbox 布局新定義了格式化上下文，類似 BFC（block formatting context）。有多類似呢？ 就是除了布局和一些細(xì)節(jié)不同以外的一切規(guī)則都和 BFC 是相同的。

注意?: 我所指的Flexbox 是指設(shè)置了?display: flex;?或?display: inline-flex;的盒子。不是指單單設(shè)置了?display: flex;?的盒子。

例如，設(shè)置了?display: flex;?或?display: inline-flex的元素，和BFC一樣，不會(huì)被浮動(dòng)的元素遮蓋，不會(huì)垂直外邊距坍塌等等。

而對(duì)于設(shè)置了?display: inline-flex?的盒子來說，我們可以類比?display: inline-box;行理解。即 一個(gè)被行列化后的 Flexbox。它不會(huì)獨(dú)占一行，但是可以設(shè)置寬和高。

但需要注意的是以下幾點(diǎn)細(xì)節(jié)，Flexbox 布局 和 Block 布局是有細(xì)微區(qū)別的

• Flexbox 不支持?::first-line?和?::first-letter?這兩種偽元素
• vertical-align?對(duì) Flexbox 中的子元素 是沒有效果的
• float?和?clear?屬性對(duì) Flexbox 中的子元素是沒有效果的，也不會(huì)使子元素脫離文檔流(但是對(duì)Flexbox 是有效果的！)
• 多欄布局（column-*）?在 Flexbox 中也是失效的，就是說我們不能使用多欄布局在Flexbox 排列其下的子元素（魚和熊掌不可得兼嘛）
• Flexbox 下的子元素不會(huì)繼承父級(jí)容器的寬

flex item（flex 子元素）

CSS解析器會(huì)把 定義了?display: flex;?和?display: inline-flex;?的 Flexbox 下的子元素外部裝進(jìn)一個(gè)看不見的盒子里，我們通過排列這些盒子來達(dá)到排序、布局、 伸縮的目的。

規(guī)范中把這種盒子 稱為?flex item，而子元素中包括了 標(biāo)簽節(jié)點(diǎn) 以及 文本節(jié)點(diǎn)。標(biāo)簽節(jié)點(diǎn)很容易理解，需要注意的是文本節(jié)點(diǎn)。

默認(rèn)情況下，flex?會(huì)將?連續(xù)的文本節(jié)點(diǎn)?裝進(jìn) flex-item 之中，使文本可以和標(biāo)簽節(jié)點(diǎn)一起排序和定位。

值得注意的是，空格也是文本節(jié)點(diǎn)，所以?white-space?會(huì)影響Flexbox 中的布局：

flex-item-size 如何計(jì)算的

item-size（尺寸）為主軸方向上item的?content?再加上自身的margin?、?border?和?padding?就是這個(gè)?item?的尺寸。

1. flex-basis 的優(yōu)先級(jí)比 width[height]: 非auto; 高

如果子元素沒有內(nèi)容和默認(rèn)固定寬高，且設(shè)置了flex-basis。flex-item content以flex-basis來決定，無論width[height]?設(shè)置了多少。

(可理解為?flex-basis?比?width[height]: 非auto;的優(yōu)先級(jí)高)

flex-basis的優(yōu)先級(jí)比width[height]高，無論width[height]設(shè)置多少，flex-item content都以flex-basis來決定。

2.元素存在默認(rèn)寬高

如果子元素有默認(rèn)固定寬高（例如input?標(biāo)簽）、并且設(shè)置了?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?計(jì)算。

如果flex-basis?的值小于?min-width[min-height]?那么flex-item content以min-width[min-height]

如果?min-width[min-height]?的值已經(jīng)超出了容器的尺寸，那么即使設(shè)置了?flex-shrink。 CSS解析器也不會(huì)進(jìn)行將這個(gè)item的 content shrink，而是堅(jiān)持保留它的min-width[min-height]：

4.width[height]: auto; 優(yōu)先級(jí)等于 flex-basis。

前面提到，如果給item同時(shí)設(shè)置了width[height]?和?flex-basis的話。flex-item content以flex-basis來決定。但是實(shí)際上默認(rèn)的?width[height]: auto;?優(yōu)先級(jí)是等于?flex-basis的。

CSS解析器對(duì)比兩者的值，兩者誰大取誰 作為item的基本尺寸，如果一個(gè)item沒有內(nèi)容，flex-item content就會(huì)以flex-basis來決定。

但是如果item有了內(nèi)容，且內(nèi)容撐開的尺寸比flex-basis大，那么flex-item content就會(huì)以width[height]: auto;?來決定，且無法被 shrink。反之，如果比flex-basis小，flex-item content就會(huì)以flex-basis來決定

idth: auto;?內(nèi)容長(zhǎng)度比?flex-basis?大，則 flex-item content以內(nèi)容長(zhǎng)度來決定，且無法shrink

如果?flex-basis?的長(zhǎng)度大于文字內(nèi)容長(zhǎng)度，那么flex-item content以?flex-basis?

Flexbox 布局很棒還是需要深入理解的

?

轉(zhuǎn)載于:https://www.cnblogs.com/zhouyideboke/p/11327640.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。