CSS flexbox彈性盒子

首先，我們需要選擇將哪些元素將設定為柔性的盒子。我們需要給這些 flexible 元素的父元素display 設定乙個特定值。

section

主軸（main axis）是沿著 flex 元素放置的方向延伸的軸（比如頁面上的橫向的行、縱向的列）。該軸的開始和結束被稱為 main start 和 main end。橫軸交叉軸（cross axis）是垂直於 flex 元素放置方向的軸。該軸的開始和結束被稱為 cross start 和 cross end。縱軸設定了 display: flex 的父元素被稱之為 flex 容器（flex container）。container在 flex 容器中表現為柔性的盒子的元素被稱之為 flex 項（flex item）item它可以指定主軸的方向（彈性盒子子類放置的地方）— 它預設值是 row

flex-direction: column

你會看到，這會將那些元素設定為列布局，就像我們新增這些 css 之前

當你在布局中使用定寬或者定高的時候，可能會有乙個問題出來即處於容器中的彈性盒子子元素會溢位，破壞了布局

解決方法：

flex-wrap: wrap

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

flex-flow: row wrap;

article

這是乙個無單位的比例值，表示每個 flex 項沿主軸的可用空間大小。本例中，我們設定

元素的 flex 值為 1，這表示每個元素占用空間都是相等的，占用的空間是在設定 padding 和 margin 之後剩餘的空間。因為它是乙個比例，這意味著將每個 flex 項的設定為 400000 的效果和 1 的時候是完全一樣的。

您還可以指定 flex 的最小值。嘗試修改現有的 article 規則：

article
article
:nth-of-type(3)

這表示「每個flex 項將首先給出200px的可用空間，然後，剩餘的可用空間將根據分配的比例共享「。嘗試重新整理，你會看到分配空間的差別。

建議不要使用全寫屬性，除非你真的需要（比如要去覆蓋之前寫的）。使用全寫會多些很多的**，它們也可能有點讓人困惑。

div

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

button :first-child

所有 flex 項預設的 order 值是 0。

order 值大的 flex 項比 order 值小的在顯示順序中更靠後。

相同 order 值的 flex 項按源順序顯示。所以假如你有四個元素，其 order 值分別是2，1，1和0，那麼它們的顯示順序就分別是第四，第二，第三，和第一。

第三個元素顯示在第二個後面是因為它們的 order 值一樣，且第三個元素在源順序中排在第二個後面。

你也可以給 order 設定負值使它們比值為 0 的元素排得更前面。比如，你可以設定「blush」按鈕排在主軸的最前面：

button :last-child

參考：

CSS flexbox彈性盒子

flex彈性盒子,,彈性盒子布局

彈性盒子（flexible box

css彈性盒子

CSS flexbox彈性盒子

flex彈性盒子,,彈性盒子布局

彈性盒子（flexible box

css彈性盒子

相關推薦