Flex 布局語法

2021-10-14 09:33:22 字數 3607 閱讀 1129

網頁布局（layout）是 css 的乙個重點應用。

布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position 屬性 + float 屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。

2009 年，w3c 提出了一種新的方案—-flex 布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。

flex 布局將成為未來布局的首選方案。本文介紹 flex 布局的語法。

以下內容主要參考了下面兩篇文章：a complete guide to flexbox 和 a visual guide to css3 flexbox properties。

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

任何乙個容器都可以指定為 flex 布局。

.box
行內元素也可以使用 flex 布局。

.box
webkit 核心的瀏覽器，必須加上 - webkit 字首。

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

採用 flex 布局的元素，稱為 flex 容器（flex container），簡稱」 容器」。它的所有子元素自動成為容器成員，稱為 flex 專案（flex item），簡稱」 專案」。

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

專案預設沿主軸排列。單個專案佔據的主軸空間叫做 main size，佔據的交叉軸空間叫做 cross size。

以下 6 個屬性設定在容器上。

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

它可能有 4 個值。

預設情況下，專案都排在一條線（又稱」 軸線」）上。flex-wrap 屬性定義，如果一條軸線排不下，如何換行。

.box
它可能取三個值。

（1）nowrap（預設）：不換行。

（2）wrap：換行，第一行在上方。

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

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

.box
justify-content 屬性定義了專案在主軸上的對齊方式。

它可能取 5 個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右。

align-items 屬性定義專案在交叉軸上如何對齊。

它可能取 5 個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。

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

該屬性可能取 6 個值。

以下 6 個屬性設定在專案上。

order 屬性定義專案的排列順序。數值越小，排列越靠前，預設為 0。

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

.item
如果所有專案的 flex-grow 屬性都為 1，則它們將等分剩餘空間（如果有的話）。如果乙個專案的 flex-grow 屬性為 2，其他專案都為 1，則前者佔據的剩餘空間將比其他項多一倍。

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

.item
如果所有專案的 flex-shrink 屬性都為 1，當空間不足時，都將等比例縮小。如果乙個專案的 flex-shrink 屬性為 0，其他專案都為 1，則空間不足時，前者不縮小。

負值對該屬性無效。

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

.item
它可以設為跟 width 或 height 屬性一樣的值（比如 350px），則專案將佔據固定空間。

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

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

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

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

.item
該屬性可能取 6 個值，除了 auto，其他都與 align-items 屬性完全一致。

Flex布局語法

flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。box 行內元素也可以使用 flex 布局。box webkit 核心的瀏覽器，必須加上 webkit字首。box 注意，設為 flex 布局以後，子元素的flo...

Flex布局語法

container 複製 採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專案 flex item 簡稱 專案 設定在容器上的屬性 container 複製 container 複製 container 複製 假設主軸從...

flex 布局 語法

flex布局概念 用法 box 複製 容器預設存在兩根軸 水平的主軸和垂直的交叉軸。株洲開始的位置叫做 main start，結束位置叫做 main end 交叉軸開始的位置叫做 cross start，結束的位置叫做 cross end。專案預設沿主軸排列，單個專案佔據的主軸空間叫做 main s...