一、彈性盒布局

???1、彈性盒布局的容器指的是采用了彈性布局的DOM元素，而彈性布局的條目指的是容器中包含的子DOM元素。最外圍的邊框表示的是容器，而編號1和2的邊框表示的是容器中的條目。

???彈性盒布局中有兩個(gè)相互垂直的坐標(biāo)軸：一個(gè)是主軸,另一個(gè)稱為交叉軸。主軸并不固定為水平方向的X軸，交叉軸并不固定為垂直方向的y軸。

• 彈性盒模型，使用display：flex 來聲明使用彈性盒模型，
• css3屬性聲明“flex-direction”用來確定主軸的方向，
• “flex-direction”屬性可選值及其含義如下

2、屬性值 && 含義

---

• row（默認(rèn)值） ? ? ?主軸為水平方向。排列順序與頁面的文檔順序相同。如果文檔順序是ltr 則排列的順序是從左到右。如果是rtl,則相反。

---

• row-reverse ? ? ? ???主軸為水平方向。排列順序是從右到左

---

• column ? ? ? ?? ? ? ???主軸為垂直方向。排列順序從上到下。

---

• column-reverse ? ? 主軸為垂直方向。排列順序?yàn)閺南碌缴?/li>

---

屬性值 含義

row（默認(rèn)值）	主軸為水平方向。排列順序與頁面的文檔順序相同。如果文檔順序是ltr 則排列的順序是從左到右。如果是rtl,則相反。
row-reverse	主軸為水平方向。排列順序是從右到左
column	主軸為垂直方向。排列順序是從上到下
column-reverse	主軸為垂直方向。排列順序是從下到上

? ? 默認(rèn)情況下，彈性盒容器的條目會盡量沾滿容器在主軸方向上的一行。當(dāng)容器的主軸尺寸小于所有條目總的主軸尺寸時(shí)，會出現(xiàn)條目之間相互重疊或超出容器范圍的現(xiàn)象。CSS屬性“flex-wrap"用來聲明當(dāng)容器中條目的尺寸超過主軸尺寸時(shí)應(yīng)采取的行動。

3、”flex-wrap" 屬性可選值如下

屬性值含義

nowrap	容器中的條目只沾滿在主軸方向上的一行，可能出現(xiàn)條目相互重疊或超出容器范圍的現(xiàn)象
wrap	當(dāng)容器中的條目超出容器在主軸方向上的一行時(shí)，會把條目排列在下一行。下一行的位置與交叉軸方向一致。
wrap-reverse	與wrap 含義類似，不同的是下一行的位置與交叉軸的方向相反。

4、可以使用“flex-flow”屬性把“flex-direction"和”flex-wrap"合并。

例：flex-flow:row wrap;

5、容器中的條目

? ? 除了彈性布局中的容器之外容器中的條目也可以通過css屬性來改變其布局行為。

6、條目的順序

? ? 默認(rèn)情況下，容器中條目的順序取決于他們在html標(biāo)記代碼中的出現(xiàn)順序。可以通過“order"屬性啦改變條目在容器中的出現(xiàn)順序。對于代碼中的html 標(biāo)記添加css聲明，運(yùn)行之后的效果就是會暗中order 的順序排

7、條目尺寸的彈性

? ? 彈性布局的核心在于容器中條目的尺寸是彈性的。容器可以根據(jù)本身尺寸的大小來動態(tài)調(diào)整條目的尺寸。當(dāng)容器存在空白空間時(shí)，條目可以擴(kuò)展尺寸以占據(jù)額外的空白空間；當(dāng)容器空間不足，條目可以縮小尺寸以防止超出容器范圍。

條目尺寸的彈性由3個(gè)CSS屬性來確定，分別是 flex-basis 、flex-grow 、 flex-shrink

? ? flex-basic值為auto 實(shí)際使用的值是主軸尺寸屬性的值即width或height屬性值。如果主軸尺寸屬性值也是auto 則使用的值由條目內(nèi)容的尺寸來確定

flex-grow屬性的值是一個(gè)沒有單位的非負(fù)數(shù)，默認(rèn)值是1.
flex-grow屬性的值分別為1，2,3，那么當(dāng)容器有空白空間時(shí)，這三個(gè)條目所獲得的額外的空白空間為全部空間的1/6 1/3 1/2

---

8、使用flex 可以同時(shí)聲明“flex-basic flex-grow flex-shrink ，格式為"none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]"。該屬性的值的 3 個(gè)組成部分的初始值分別是"0 1 auto"。當(dāng)屬性"flex"的值為 none 時(shí)，相當(dāng)于"0 0 auto"。當(dāng)組成部分"flex-basis"被省略時(shí)，其值為 0%。

9、在主軸方向上的對齊。

• 這是通過容器上的“justify-content”屬性來進(jìn)行設(shè)置，可以調(diào)整條目在主軸方向上的對齊方式。
• 這種跳碼樣對齊方式的調(diào)整發(fā)生在修改條目的彈性尺寸和處理自動空白邊之后。
• 當(dāng)容器中的一行中的數(shù)目沒有彈性尺寸，或是已經(jīng)達(dá)到了最大尺寸時(shí)，在這一行上可能還有額外的空白空間。
• 使用“justify-content"屬性可以分配這些空間。
• 該屬性還可以控制當(dāng)條目超出行的范圍時(shí)的對齊方式、
  ”justify-content“屬性的可選值和含義如下

屬性值含義

flex-start	條目集中在該行的起始位置。第一個(gè)條目與其所在行在主軸起始方向上的邊界保持對齊，其余的條目按照順序依次排列。
flex-end	條目集中在該行的結(jié)束方向。最后一個(gè)條目與其所在行在主軸結(jié)束方向上的邊界保持對齊，其余條目按照順序依次排列。
center	條目集中在該行的中央。條目都往該行的中央排列，在主軸起始方向和結(jié)束方向上留有同樣大小的空白空間。如果空白空間不足，則條目會在兩個(gè)方向上超出同樣的空間。
space-between	第一個(gè)條目與其所在行在主軸起始方向上的邊界對齊，最后一個(gè)條目與其所在行在主軸結(jié)束方向保持對齊。空白空間在條目之間平均分配，使得相鄰條目之間的空白尺寸相同。
space-around	類似space-between,不同的是第一條目和最后一個(gè)條目與該行的邊界之間同樣存在空白空間，該空白空間的尺寸是條目之間的空白空間尺寸的一半。

10、交叉軸方向的對齊

? ? 容器使用“align-items"來設(shè)置容器中所有條目在交叉軸上默認(rèn)的對齊方式。而條目上的”align-self“用來覆蓋容器指定的對齊方式。屬性”align-items“的可選值和含義如下

屬性值含義

flex-start	條目與其所在行在交叉軸起始方向上的邊界保持對齊
flex-end	條目與其所在行在交叉軸結(jié)束方向上的邊界保持對齊
center	條目的空白邊盒子在交叉軸上居中，如果交叉軸尺寸小于條目尺寸，則條目會在兩個(gè)方向上超出相同大小的空間。
baseline	條目在基線上保持對齊。在所有條目中，基準(zhǔn)線與交叉軸起始方向上的邊界距離最大的條目，他與所在行在交叉軸方向上的邊界保持對齊
stretch	如果條目的交叉軸尺寸的計(jì)算值是auto ，則其實(shí)際使用的值會使得條目在交叉軸方向上盡可能占滿。

屬性"align-self"的可選值除了表中列出的之外，還可以設(shè)置為"auto"。當(dāng)"align-self"的值為 auto 時(shí)，其計(jì)算值是父節(jié)點(diǎn)的屬性"align-items"的值。如果該節(jié)點(diǎn)沒有父節(jié)點(diǎn)，則計(jì)算值為"stretch"。

11、交叉軸空白處理

? ? 當(dāng)容器在交叉軸方向上有空白空間時(shí)，屬性“align-content"用來對齊容器中的行。該屬性類似”justify-content",只不過“justify-content：是在值周方向上對齊行中的條目。
當(dāng)容器中只有單行時(shí)，該屬性不起作用。

屬性“align-content”的可選值和含義：

屬性值含義

flex-start	行集中于容器的交叉軸起始位置。第一行與容器在交叉軸起始方向上的邊界保持對齊，其余行按照順序依次排列。
flex-end	行集中于容器的交叉軸結(jié)束位置。第一行與容器在交叉軸結(jié)束方向上的邊界保持對齊，其余行按照順序依次排列。
center	行集中于容器的中央。行都往容器中央排列，在交叉軸其實(shí)方向和結(jié)束方向上都留有同樣大小的空白空間。如果空白空間不足，則行會在兩個(gè)方向上超出同樣的空間。
space-between	行在容器中均勻分布。第一行與容器在交叉軸其實(shí)方向上的邊界保持對齊，最后一行與容器在交叉軸結(jié)束方向上的邊界保持對齊。空白空間在行之間分配，使得相鄰行之間的空白尺寸相同。
space-around	類似于space-between ，不同的是第一行條目和最后一行條目與容器行的邊界之間同樣存在空白空間，而該空間的尺寸時(shí)行目之間的尺寸的一半。
stretch	伸展行來占滿剩余的空間。多余的空間在行之間平均分配，使得每一行的交叉軸尺寸變大。

屬性“align-content”的不同值的布局效果

總結(jié)

以上是生活随笔為你收集整理的弹性盒模型学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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