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

為什么是 彈性盒子?

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

以下簡(jiǎn)單的布局需求是難以或不可能用這樣的工具方便且靈活的實(shí)現(xiàn)的：

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

這些彈性盒子都可以實(shí)現(xiàn)。。。我草

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

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

div {display:flex }

注意：假如你想設(shè)置行內(nèi)元素為彈性盒子，也可以置 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 模型說(shuō)明

當(dāng)元素表現(xiàn)為 flex 框時(shí)，它們沿著兩個(gè)軸來(lái)布局，也就是 main axis 和 cross axis：

• 主軸（main axis）是水平 flex 元素放置的方向延伸的軸。該軸的開(kāi)始和結(jié)束被稱(chēng)為 main start 和 main end。

• 交叉軸（cross axis）是垂直于 flex 元素放置方向的軸。該軸的開(kāi)始和結(jié)束被稱(chēng)為 cross start 和 cross end。
• 設(shè)置了 display: flex 的父元素被稱(chēng)之為 flex 容器（flex container）

• 在 flex 容器中表現(xiàn)為彈性的盒子的元素被稱(chēng)之為 flex 項(xiàng)（flex item）

1. flex-flow

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

flex-direction: row;

flex-wrap: wrap;

縮寫(xiě)為

flex-flow: row wrap;

flex-direction

它可以指定主軸的方向（彈性盒子子類(lèi)放置的地方）— 它默認(rèn)值是 row，這使得它們?cè)诎茨銥g覽器的默認(rèn)語(yǔ)言方向排成一排（從左到右）。

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

flex-direction: column; /*子元素總高度大于父元素高度也不會(huì)超出，會(huì)自適應(yīng)*/

你會(huì)看到，這會(huì)將那些元素設(shè)置為列布局

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

flex-wrap

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

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

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

flex-wrap: wrap

2. flex

flex 縮寫(xiě)

• auto: 計(jì)算值為 1 1 auto
• initial: 計(jì)算值為 0 1 auto

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

• [ flex-grow ]：定義彈性盒子元素的擴(kuò)展比率。
• [ flex-basis ]：定義彈性盒子元素的默認(rèn)基準(zhǔn)值。

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

動(dòng)態(tài)尺寸

現(xiàn)在讓我們來(lái)看看如何控制 flex 項(xiàng)占用空間的比例。

給子項(xiàng)加入：

flex: 1

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

現(xiàn)在在上一個(gè)規(guī)則下添加：

flex: 2;? /*?你會(huì)發(fā)現(xiàn)：第2個(gè)占用2/4的空間?*/

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

flex-shrink

flex-grow、 flex-basis上面已經(jīng)講過(guò)了， flex-shrink 用于設(shè)置如何分配?溢出?的內(nèi)容

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

3. 水平和垂直對(duì)齊

justify-content 屬性

內(nèi)容對(duì)齊（justify-content）屬性應(yīng)用在彈性容器上，把彈性項(xiàng)沿著彈性容器的主軸線（main axis）對(duì)齊。

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

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

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

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

align-items

設(shè)置或檢索彈性盒子元素在 縱軸 方向上的對(duì)齊方式。

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

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

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

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

align-content 屬性

align-content 屬性用于修改 flex-wrap 屬性的行為。類(lèi)似于 align-items, 但它不是設(shè)置彈性子元素的對(duì)齊，而是設(shè)置各個(gè)行的對(duì)齊。

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

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

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

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

align-self

align-self 屬性用于設(shè)置彈性元素自身在側(cè)軸（縱軸）方向上的對(duì)齊方式。這個(gè)屬性可能看起來(lái)有點(diǎn)難理解，實(shí)際上就是子元素在縱軸上的位置

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

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

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

• baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對(duì)齊。
• stretch：如果子項(xiàng)沒(méi)有設(shè)置固定高度，那么擴(kuò)展充滿父容器

4. flex項(xiàng)排序

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

給 d1 元素設(shè)置 order: 1 他跑到結(jié)尾去了，怎么回事？

它實(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，那么它們的顯示順序就分別是第四，第二，第三，和第一
• 你也可以給 order 設(shè)置負(fù)值使它們比值為 0 的元素排得更前面

5. flex嵌套

彈性盒子也可以互相嵌套，給子項(xiàng)設(shè)置 flex 即可

總結(jié)

以上是生活随笔為你收集整理的css 弹性盒子的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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