彈性盒子是一種用于按行或按列布局元素的一維布局方法 。元素可以膨脹以填充額外的空間, 收縮以適應更小的空間

為什么是 彈性盒子?

長久以來，CSS 布局中唯一可靠且跨瀏覽器兼容的創建工具只有 float 和 position。這兩個工具大部分情況下都很好使，但是在某些方面它們具有一定的局限性，讓人難以完成任務。

以下簡單的布局需求是難以或不可能用這樣的工具方便且靈活的實現的：

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

這些彈性盒子都可以實現。。。我草

指定元素的布局為彈性盒子

首先，我們需要給父元素設置display：flex

div {display:flex }

注意：假如你想設置行內元素為彈性盒子，也可以置 display 屬性的值為 inline-flex。

示例：

<style> .parent {width:500px;height:200px;background-color:coral;display:flex; /*彈性盒子*/ } .parent div {width:100px;height:100px;background-color:blueviolet; } </style><div class="parent"><div>1</div><div>2</div><div>3</div><div>4</div> </div>

?

flex 模型說明

當元素表現為 flex 框時，它們沿著兩個軸來布局，也就是 main axis 和 cross axis：

• 主軸（main axis）是水平 flex 元素放置的方向延伸的軸。該軸的開始和結束被稱為 main start 和 main end。

• 交叉軸（cross axis）是垂直于 flex 元素放置方向的軸。該軸的開始和結束被稱為 cross start 和 cross end。
• 設置了 display: flex 的父元素被稱之為 flex 容器（flex container）

• 在 flex 容器中表現為彈性的盒子的元素被稱之為 flex 項（flex item）

1. flex-flow

flex-direction 和 flex-wrap 的縮寫 flex-flow。比如，你可以將

flex-direction: row;

flex-wrap: wrap;

縮寫為

flex-flow: row wrap;

flex-direction

它可以指定主軸的方向（彈性盒子子類放置的地方）— 它默認值是 row，這使得它們在按你瀏覽器的默認語言方向排成一排（從左到右）。

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

flex-direction: column; /*子元素總高度大于父元素高度也不會超出，會自適應*/

你會看到，這會將那些元素設置為列布局

注意：你還可以使用 row-reverse 和 column-reverse 值反向排列 flex 項目。用這些值試試看吧！

flex-wrap

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

min-width: 100px; /*最小寬度100*/

在這里我們看到，子代確實超出了它們的容器。 解決此問題的一種方法是將以下聲明

flex-wrap: wrap

2. flex

flex 縮寫

• auto: 計算值為 1 1 auto
• initial: 計算值為 0 1 auto

• none：計算值為 0 0 auto
• inherit：從父元素繼承

• [ flex-grow ]：定義彈性盒子元素的擴展比率。
• [ flex-basis ]：定義彈性盒子元素的默認基準值。

• [ flex-shrink ]：定義彈性盒子元素的收縮比率。

動態尺寸

現在讓我們來看看如何控制 flex 項占用空間的比例。

給子項加入：

flex: 1

這是一個無單位的比例值，表示每個 flex 項沿主軸的可用空間大小。flex 值為 1，這表示每個元素占用空間都是相等的，占用的空間是在設置 padding 和 margin 之后剩余的空間。因為它是一個比例，這意味著將每個 flex 項的設置為 400000 的效果和 1 的時候是完全一樣的。

現在在上一個規則下添加：

flex: 2;? /*?你會發現：第2個占用2/4的空間?*/

您還可以指定 flex 的最小值，會至少分配400的空間，剩下的可用空間再大家分配

flex-shrink

flex-grow、 flex-basis上面已經講過了， flex-shrink 用于設置如何分配?溢出?的內容

這個示例中，假設忽略那個 1px 的 border，實際上盒子超出了 80px，那么超出的 80px 給 class d1 的分一份，class d2 的元素會分兩份，所以 d2 縮得的多一些，可以自己試試

3. 水平和垂直對齊

justify-content 屬性

內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊。

justify-content: flex-start | flex-end | center | space-between | space-around

• flex-start：
  彈性項目向行頭緊挨著填充。這個是默認值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而后續彈性項依次平齊擺放。
• flex-end：
  彈性項目向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而后續彈性項依次平齊擺放。

• center：
  彈性項目居中緊挨著填充。（如果剩余的自由空間是負的，則彈性項目將在兩個方向上同時溢出）。
• space-between：
  彈性項目平均分布在該行上。如果剩余空間為負或者只有一個彈性項，則該值等同于flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最后1個彈性項的外邊距和行的main-end邊線對齊，然后剩余的彈性項分布在該行上，相鄰項目的間隔相等。

• space-around：
  彈性項目平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負或者只有一個彈性項，則該值等同于center。否則，彈性項目沿該行分布，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。

align-items

設置或檢索彈性盒子元素在 縱軸 方向上的對齊方式。

align-items: stretch | center | flex-start | flex-end | baseline

• flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
• flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。

• center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
• baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。

• stretch：如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。

align-content 屬性

align-content 屬性用于修改 flex-wrap 屬性的行為。類似于 align-items, 但它不是設置彈性子元素的對齊，而是設置各個行的對齊。

align-content: flex-start | flex-end | center | space-between | space-around | stretch

• stretch - 默認。各行將會伸展以占用剩余的空間。
• flex-start - 各行向彈性盒容器的起始位置堆疊。

• flex-end - 各行向彈性盒容器的結束位置堆疊。
• center -各行向彈性盒容器的中間位置堆疊。

• space-between -各行在彈性盒容器中平均分布。
• space-around - 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。

align-self

align-self 屬性用于設置彈性元素自身在側軸（縱軸）方向上的對齊方式。這個屬性可能看起來有點難理解，實際上就是子元素在縱軸上的位置

align-self: auto | flex-start | flex-end | center | baseline | stretch

• auto：如果'align-self'的值為'auto'，則其計算值為元素的父元素的'align-items'值，如果其沒有父元素，則計算值為'stretch'。
• flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。

• flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
• center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。

• baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
• stretch：如果子項沒有設置固定高度，那么擴展充滿父容器

4. flex項排序

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

給 d1 元素設置 order: 1 他跑到結尾去了，怎么回事？

它實現的一些細節：

• 所有 flex 項默認的 order 值是 0
• order 值大的 flex 項比 order 值小的在顯示順序中更靠后

• 相同 order 值的 flex 項按源順序顯示。所以假如你有四個元素，其 order 值分別是2，1，1和0，那么它們的顯示順序就分別是第四，第二，第三，和第一
• 你也可以給 order 設置負值使它們比值為 0 的元素排得更前面

5. flex嵌套

彈性盒子也可以互相嵌套，給子項設置 flex 即可

總結

以上是生活随笔為你收集整理的css 弹性盒子的全部內容，希望文章能夠幫你解決所遇到的問題。

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