一、彈性盒布局

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

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

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

2、屬性值 && 含義

---

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

---

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

---

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

---

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

---

屬性值 含義

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

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

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

屬性值含義

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

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

例：flex-flow:row wrap;

5、容器中的條目

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

6、條目的順序

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

7、條目尺寸的彈性

? ? 彈性布局的核心在于容器中條目的尺寸是彈性的。容器可以根據本身尺寸的大小來動態調整條目的尺寸。當容器存在空白空間時，條目可以擴展尺寸以占據額外的空白空間；當容器空間不足，條目可以縮小尺寸以防止超出容器范圍。

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

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

flex-grow屬性的值是一個沒有單位的非負數，默認值是1.
flex-grow屬性的值分別為1，2,3，那么當容器有空白空間時，這三個條目所獲得的額外的空白空間為全部空間的1/6 1/3 1/2

---

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

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

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

屬性值含義

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

10、交叉軸方向的對齊

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

屬性值含義

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

屬性"align-self"的可選值除了表中列出的之外，還可以設置為"auto"。當"align-self"的值為 auto 時，其計算值是父節點的屬性"align-items"的值。如果該節點沒有父節點，則計算值為"stretch"。

11、交叉軸空白處理

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

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

屬性值含義

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

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

總結

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

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