css彈性布局（flex）

1：概念解讀：

傳統的布局解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。

但對於一些特殊的布局方式（如垂直居中），傳統盒模型顯得有點力不從心，而對彈性布局（flex）來說卻很容易實現。

2023年，w3c 提出了一種新的方案  ----  flex 布局

flex是flexible box的縮寫，意為「彈性布局」，用來為盒狀模型提供最大的靈活性。

2：瀏覽器支援情況如下圖：

可以看出：pc端要考慮到ie9以下不支援的情況；而手機端支援情況良好，可以放心使用。

注意：任何元素都可以使用  flex  布局方式；

設為 flex 布局以後，子元素的float和vertical-align屬性將失效；

採用 flex 布局的元素，稱為 flex 容器，它的所有子元素將自動成為容器成員。

3：用法如下：

3.1.對需要flex的元素設定如下：

.box

2.flex-wrap：如果一條軸線排不下，如何換行（預設：不換行）。

3.flex-flow：flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。

4.justify-content：定義專案在主軸上的對齊方式。

5.align-items：定義專案在交叉軸上如何對齊。

6.align-content：定義多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

3.2.對flex元素的子元素設定如下：

.box .item

2.flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。

3.flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。

4.flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。

5.flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選；

flex屬性用於設定或檢索彈性盒的子元素如何分配空間，如子元素均設定flex:1，表示所有子元素等比例分配父空間；

6.align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

css布局之彈性布局flex

作用 彈性布局flex能按照我們的設定自動計算各子元素之間的間距並將之布局好，而不需要像定位那樣手動計算布局。彈性布局是定義在乙個父容器中，加上display flex樣式使父容器的布局方式成為彈性布局。父容器中的子元素都會成為行內塊，預設所有子元素橫向排列，子元素的float clear和vert...

Flex布局（CSS彈性盒子）

css3彈性盒子 flexible box或flexbox 是一種用於在頁面上布置元素的布局模式，使得當頁面布局必須適應不同的螢幕尺寸和不同的顯示裝置時，元素可 地執行。對於許多應用程式，彈性盒子模型提供了對塊模型的改進，因為它不使用浮動，flex容器的邊緣也不會與其內容的邊緣摺疊。摘自mdn 使用...

CSS之Flex彈性布局

flex彈性布局實現水平垂直居中 父盒子display flex 子盒子margin auto 概念 採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 父容器 displa...