【愚公系列】2022年04月 微信小程序-Flex布局詳解

一、Flex布局詳解

1.Flex布局的概念

1.1 傳統布局

盒子模型：我們知道當并列書寫多個div標簽，它們會縱向向下排位，如果我們想將多個div并列成一排，就得借助position，float，或display屬性，這便是傳統的盒模型做法。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

下面的圖片說明了盒子模型(Box Model)：

不同部分的說明：

Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。

Border(邊框) - 圍繞在內邊距和內容外的邊框。

Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。

Content(內容) - 盒子的內容，顯示文本和圖像。

1.2 Flex布局

Flex容器：Flex布局則是一種新的布局方案，通過為修改父div的display屬性，讓父元素成為一個flex容器，從而可以自由的操作容器中子元素(項目)的排列方式。

例如我們讓多個div橫向排列，傳統做法是使用浮動，但浮空后因為脫離文檔流的緣故，父元素會失去高度，這又涉及了清除浮動等一系列的問題。

而flex布局相對簡單很多，修改父元素display:flex，你會發現div自動就排列成了一行，而且沒有浮動之后的副作用，從回流角度考慮，flex的性能更優于float；隨著瀏覽器不斷兼容以及舊版本的淘汰，flex布局注定會成為更為流行的布局方案。

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。

項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。

1.3 Flex布局聲明

Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。

任何一個容器都可以指定為 Flex 布局。

.box{ display: flex; }

行內元素也可以使用 Flex 布局。

.box{ display: inline-flex; }

Webkit 內核的瀏覽器，必須加上-webkit前綴。

.box{ display: -webkit-flex; /* Safari */ display: flex; }

注意，設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

2.Flex布局的容器屬性

Flex布局的容器屬性主要有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

2.1 flex-direction屬性

flex-direction屬性決定主軸的方向（即項目的排列方向）。

.box { flex-direction: row | row-reverse | column | column-reverse; }

值說明：

row（默認值）：主軸為水平方向，起點在左端。

row-reverse：主軸為水平方向，起點在右端。

column：主軸為垂直方向，起點在上沿。

column-reverse：主軸為垂直方向，起點在下沿。

row橫向排列，項目排列順序為正序1-2-3。

row-reverse橫向排列，項目順序為倒序3-2-1。

column縱向排列，項目順序為正序1-2-3。

column-reverse縱向排列，項目順序為倒序3-2-1。

column-reverse排列示意圖：

2.2 flex-wrap屬性

flex-wrap屬性用于控制項目是否換行。

.box{ flex-wrap: nowrap | wrap | wrap-reverse; }

值說明：

nowrap（默認）：不換行。

wrap：換行，第一行在上方。

wrap-reverse：換行，第一行在下方。

nowrap示意圖：

wrap示意圖：

wrap-reverse示意圖：

2.3 flex-flow屬性

flex-flow屬性是flex-deriction與flex-wrap屬性的簡寫集合，默認屬性為row nowrap，即橫向排列，且不換行，如果需要控制項目排列與換行，推薦使用此屬性，而非單獨寫兩個。

.box { flex-flow: || ; }

2.4 justify-content屬性

justify-content屬性用于控制項目在橫軸的對齊方式，默認flex-start即左對齊，center 為居中，對應的flex-end為右對齊。

.box { justify-content: flex-start | flex-end | center | space-between | space-around; }

值說明：

flex-start（默認值）：左對齊

flex-end：右對齊

center： 居中

space-between：兩端對齊，項目之間的間隔都相等。

space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

示意圖：

2.5 align-items屬性

align-items屬性用于控制項目在縱軸排列方式，默認stretch即如果項目沒設置高度，或高度為auto，則占滿整個容器，下面第一張圖的項目沒設置高度，其余圖片中均為60px。

.box { align-items: flex-start | flex-end | center | baseline | stretch; }

值說明：

flex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊。

center：交叉軸的中點對齊。

baseline: 項目的第一行文字的基線對齊。

stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

示意圖：

注意，常理來說justify-content與align-items默認分別處理項目橫軸，縱軸的對齊方式，但如果我們修改了flex-direction為column，它們處理的軸向會交換，也就是justify-content處理縱軸，align-items處理橫軸。

2.6 align-content屬性

align-content屬性用于控制多行項目的對齊方式，如果項目只有一行則不會起作用；默認stretch，即在項目沒設置高度，或高度為auto情況下讓項目填滿整個容器，與align-items類似。

.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

值說明：

flex-start：與交叉軸的起點對齊。

flex-end：與交叉軸的終點對齊。

center：與交叉軸的中點對齊。

space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。

space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

stretch（默認值）：軸線占滿整個交叉軸。

示意圖：

align-content其實也有baseline等其它可用值，表現與上面介紹過的屬性一致，只是單行項目或多行項目的區別。

3.Flex布局的項目屬性

Flex布局的項目屬性主要有：order、flex-grow、flex-shrink、flex-basis、flex、align-self。

3.1 order屬性

order屬性用于決定項目排列順序，數值越小，項目排列越靠前。

.item { order: ; }

3.2 flex-grow屬性

flex-grow屬性用于決定項目在有剩余空間的情況下是否放大，默認不放大；注意，即便設置了固定寬度，也會放大。

.item { flex-grow: ; /* default 0 */ }

假設默認三個項目中前兩個個項目都是0，最后一個是1，最后的項目會沾滿剩余所有空間。

假設只有第一個項目默認為0，后面兩個項目flex-grow均為1，那么后兩個項目平分剩余空間。

假設第一個項目默認為0，第二個項目為flex-grow:2，最后一個項目為1，則第二個項目在放大時所占空間是最后項目的兩倍。

3.3 flex-shrink屬性

flex-shrink屬性用于決定項目在空間不足時是否縮小，默認項目都是1，即空間不足時大家一起等比縮小；注意，即便設置了固定寬度，也會縮小。

.item { flex-shrink: ; /* default 1 */ }

3.4 flex-basis屬性

flex-basis屬性用于設置項目寬度，默認auto時，項目會保持默認寬度，或者以width為自身的寬度，但如果設置了flex-basis，權重會width屬性高，因此會覆蓋widtn屬性。

.item { flex-basis: | auto; /* default auto */ }

上圖中先設置了flex-basis屬性，后設置了width屬性，但寬度依舊以flex-basis屬性為準。

3.5 flex屬性

flex屬性是flex-grow，flex-shrink與flex-basis三個屬性的簡寫，用于定義項目放大，縮小與寬度。

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。

3.6 align-self屬性

align-self屬性用于讓個別項目擁有與其它項目不同的對齊方式，各值的表現與父容器的align-items屬性完全一致。

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

總結

Flex布局在小程序應用還是很廣的也可以用于網頁。小程序也有很多UI框架可以使用這樣Flex布局不需要自己寫。

CSS 容器 小程序

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。