CSS 盒模型

彈性盒子

本文有引用https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSSlayout/Flexbox 相關(guān)內(nèi)容。
彈性盒子是一種新技術(shù)，但在如今各個(gè)瀏覽器都廣泛支持的情況下，它已經(jīng)開始準(zhǔn)備廣泛應(yīng)用了。 彈性盒子提供了工具，允許快速創(chuàng)建曾經(jīng)被證明用CSS很難實(shí)現(xiàn)的一些復(fù)雜，靈活的布局和功能。

為什么是 彈性盒子?

    長久以來，唯一可用的且有穩(wěn)定的跨瀏覽器兼容性的能用來構(gòu)建 CSS 布局的工具只有 floats 和 positioning。它們是既可行，表現(xiàn)也不錯(cuò)的布局方案，但是在某些布局方面它們就有限制，并且難以實(shí)現(xiàn)。

以下簡單的布局要求是難以或不可能用這樣的工具（ floats 和 positioning）方便且靈活的實(shí)現(xiàn)的：

在父內(nèi)容里面垂直居中一個(gè)塊內(nèi)容。
使容器的所有子項(xiàng)占用等量的可用寬度/高度，而不管有多少寬度/高度可用。
使多列布局中的所有列采用相同的高度，即使它們包含的內(nèi)容量不同。

flex 模型說明

當(dāng)元素表現(xiàn)為 flex 框時(shí)，它們沿著兩個(gè)軸來布局：

flex_terms.png

主軸（main axis）是沿著 flex 元素放置的方向延伸的軸（比如頁面上的橫向的行、縱向的列）。該軸的開始和結(jié)束被稱為 main start 和 main end。
交叉軸（cross axis）是垂直于 flex 元素放置方向的軸。該軸的開始和結(jié)束被稱為 cross start 和 cross end。
設(shè)置了 display: flex 的父元素（在本例中是 <section>）被稱之為 flex 容器（flex container）。
在 flex 容器中表現(xiàn)為柔性的盒子的元素被稱之為 flex 項(xiàng)（flex item）。

列還是行?

    彈性盒子提供了 flex-direction 這樣一個(gè)屬性，它可以指定主軸的方向（彈性盒子子類放置的地方）— 它默認(rèn)值是 row，這使得它們?cè)诎茨銥g覽器的默認(rèn)語言方向排成一排（在英語/中文瀏覽器中是從左到右）。

嘗試將以下聲明添加到 section 元素的 css 規(guī)則里：

flex-direction: column

換行

    當(dāng)你在布局中使用定寬或者定高的時(shí)候，可能會(huì)有一個(gè)問題出來即處于容器中的 彈性盒子子元素會(huì)溢出，破壞了布局。

    解決此問題的一種方法是將以下聲明添加到 section css 規(guī)則中：

flex-wrap: wrap

flex-flow 縮寫

到這里，應(yīng)當(dāng)注意到存在著 flex-direction 和 flex-wrap — 的縮寫 flex-flow。比如，你可以將

flex-direction: row;
flex-wrap: wrap;

替換為

flex-flow: row wrap;

flex 項(xiàng)的動(dòng)態(tài)尺寸

article {
  flex: 1;
}

flex:1 這表示每個(gè)元素占用空間都是相等的，占用的空間是在設(shè)置 padding 和 margin 之后剩余的空間。因?yàn)樗且粋€(gè)比例，這意味著將每個(gè) flex 項(xiàng)的設(shè)置為 400000 的效果和 1 的時(shí)候是完全一樣的。

article:nth-of-type(3) {
  flex: 2;
}

article:nth-of-type(3)表示第三個(gè)article元素。
現(xiàn)在當(dāng)你刷新，你會(huì)看到第三個(gè) <article> 元素占用了兩倍的可用寬度和剩下的一樣 — 現(xiàn)在總共有四個(gè)比例單位可用。 前兩個(gè) flex 項(xiàng)各有一個(gè)，因此它們占用每個(gè)可用空間的1/4。 第三個(gè)有兩個(gè)單位，所以它占用2/4或這說是1/2的可用空間。

flex: 縮寫與全寫

flex 是一個(gè)可以指定最多三個(gè)不同值的縮寫屬性：

第一個(gè)就是上面所討論過的無單位比例?？梢詥为?dú)指定全寫 flex-grow 屬性的值。
第二個(gè)無單位比例 — flex-shrink — 一般用于溢出容器的 flex 項(xiàng)。這指定了從每個(gè) flex 項(xiàng)中取出多少溢出量，以阻止它們溢出它們的容器。 這是一個(gè)相當(dāng)高級(jí)的彈性盒子功能，我們不會(huì)在本文中進(jìn)一步說明。
第三個(gè)是上面討論的最小值?？梢詥为?dú)指定全寫 flex-basis 屬性的值。

我們建議不要使用全寫屬性，除非你真的需要（比如要去覆蓋之前寫的）。使用全寫會(huì)多些很多的代碼，它們也可能有點(diǎn)讓人困惑。

水平和垂直對(duì)齊

還可以使用 彈性盒子的功能讓 flex 項(xiàng)沿主軸或交叉軸對(duì)齊。讓我們一起看一下新例子 — flex-align0.html（在線瀏覽）— 我們將會(huì)有一個(gè)整潔，靈活的按鈕/工具欄。 此時(shí)，你看到了一個(gè)水平菜單欄，其中一些按鈕卡在左上角，就像下面這樣：

首先，拷貝一份到本地。

然后，將下面的 CSS 添加到例子的底部：

div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

刷新一下頁面，你就會(huì)看到這些按鈕很好的垂直水平居中了。我們是通過下面所說的兩個(gè)新的屬性做到的。

align-items 控制 flex 項(xiàng)在交叉軸上的位置。

默認(rèn)的值是 stretch，其會(huì)使所有 flex 項(xiàng)沿著交叉軸的方向拉伸以填充父容器。如果父容器在交叉軸方向上沒有固定寬度（即高度），則所有 flex 項(xiàng)將變得與最長的 flex 項(xiàng)一樣長（即高度保持一致）。我們的第一個(gè)例子在默認(rèn)情況下得到相等的高度的列的原因。
在上面規(guī)則中我們使用的 center 值會(huì)使這些項(xiàng)保持其原有的高度，但是會(huì)在交叉軸居中。這就是那些按鈕垂直居中的原因。
你也可以設(shè)置諸如 *flex-start* 或 *flex-end* 這樣使 flex 項(xiàng)在交叉軸的開始或結(jié)束處對(duì)齊所有的值。查看 align-items 了解更多。

你可以用 align-self 屬性覆蓋 align-items 的行為。比如，你可以這樣：

button:first-child {
  align-self: flex-end;
}

去看看它產(chǎn)生的效果，然后刪除它。

justify-content 控制 flex 項(xiàng)在主軸上的位置。

默認(rèn)值是 *flex-start*，這會(huì)使所有 flex 項(xiàng)都位于主軸的開始處。
你也可以用* flex-end* 來讓 flex 項(xiàng)到結(jié)尾處。
center 在* justify-content* 里也是可用的，可以讓 flex 項(xiàng)在主軸居中。
而我們上面用到的值 space-around 是很有用的——它會(huì)使所有 flex 項(xiàng)沿著主軸均勻地分布，在任意一端都會(huì)留有一點(diǎn)空間。
還有一個(gè)值是 space-between，它和 space-around 非常相似，只是它不會(huì)在兩端留下任何空間。

flex 項(xiàng)排序

彈性盒子也有可以改變 flex 項(xiàng)的布局位置的功能，而不會(huì)影響到源順序（即 dom 樹里元素的順序）。這也是傳統(tǒng)布局方式很難做到的一點(diǎn)。

代碼也很簡單，將下面的 CSS 添加到示例代碼下面。

button:first-child {
  order: 1;
}

刷新下，然后你會(huì)看到 "Smile" 按鈕移動(dòng)到了主軸的末尾。下面我們談下它實(shí)現(xiàn)的一些細(xì)節(jié)：

所有 flex 項(xiàng)默認(rèn)的 order 值是 0。
order 值大的 flex 項(xiàng)比 order 值小的在顯示順序中更靠后。
相同 order 值的 flex 項(xiàng)按源順序顯示。所以假如你有四個(gè)元素，其 order 值分別是2，1，1和0，那么它們的顯示順序就分別是第四，第二，第三，和第一。
第三個(gè)元素顯示在第二個(gè)后面是因?yàn)樗鼈兊?order 值一樣，且第三個(gè)元素在源順序中排在第二個(gè)后面。

你也可以給 order 設(shè)置負(fù)值使它們比值為 0 的元素排得更前面。比如，你可以設(shè)置 "Blush" 按鈕排在主軸的最前面：

button:last-child {
  order: -1;
}

彈性盒子也可以嵌套，這里先不多說。

大多數(shù)瀏覽器都支持 彈性盒子，諸如 Firefox, Chrome, Opera, Microsoft Edge 和 IE 11，較新版本的 Android/iOS 等等；但仍然要注意兼容性問題。