引言

最近記性特別不好，居然忘記 Flex 布局子項居中怎么寫了，于是又看了一遍阮一峰老師的《Flex 布局教程》，為了能夠加深記憶，邊做記錄邊練習，因此整理本文作為自學筆記。

本文來源：阮一峰老師的《Flex 布局教程》

Flex 布局又稱 "彈性布局" 。任何一個容器都可以指定為 Flex 布局。

采用 Flex 布局的外層元素叫做 “容器” ，子元素叫做 “項”。

容器必須設置下面的代碼，才能采用 Flex 布局。

display: flex | inline-flex

inline-flex 代表容器是個行內元素。

容器有兩根軸：水平的主軸和垂直的交叉軸。

容器屬性

flex-direction

項的排列方向。

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

row ：默認，水平方向排列，方向起點在左側。

row-reverse ：水平方向逆向排列，方向起點在右側。

column ：垂直方向排列，方向起點在頂端。

column-reverse ：垂直方向排列，方向起點在底端。

flex-wrap

項會自動排列在一個方向上，不會換行。如果換行顯示，就需要 flex-wrap 屬性。

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

wrap ：默認，不換行。

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

wrap-reverse ：換行，第一行下下面。

flex-flow

flex-direction 屬性和 flex-wrap 屬性的簡寫，默認值為 row nowrap 。

.container { flex-flow: | ;}

justify-content

項 (水平) 對齊的方式。根據 flex-direction 設置的方向決定水平或垂直對齊。

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

flex-start ：默認，項左對齊。

flex-end ：項右對齊。

center ：項居中對齊。

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

space-around ：項兩側間隔相等，所以第 1 項和第 2 項與邊框的距離要比項之間的距離小 1 倍。

align-items

項 (垂直) 對齊的方式。根據 flex-direction 設置的方向決定水平或垂直對齊。

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

stretch ：默認，如果項沒有設置高度或者高度為 auto ，則占滿整個容器的高度。

flex-start ：頂端對齊。

flex-end ：底端對齊。

center ：居中對齊。

baseline ：baseline ：第一行文字的底端 (基線) 對齊。可以設置項的 line-height 看效果。

align-content

align-content 屬性定義如何使用垂直的剩余空間，也就是說如果項只占用一行，這個屬性不發揮作用，如果項換行了，則可以設置剩余垂直空間的對齊方式。根據 flex-direction 設置的方向決定水平或垂直對齊。

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

stretch ：默認，占滿這個垂直高度。

flex-start ：頂端對齊。

flex-end ：底端對齊。

center ：居中對齊。

space-between ：兩端對齊，間隔平均分布。

space-around ：項兩側的間隔都相等。所以，邊框和項的距離比項與項之間的距離小 1 倍。

項屬性

order

定義項的順序。數值越小，越靠前，默認為 0 。

.item { order: ;}

例如：

.item-1 { order: 6;}

flex-grow

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

定義項的放大比例，默認為 0 ，不放大。

所有項的 flex-grow 屬性都為 1 時，如果還有剩余空間，則它們將等分剩余空間。相當于 “份” 的概念。

flex-shrink

項的縮小比例。項僅在默認寬度之和大于容器的時候才會發生縮小，也就是說在容器寬度不夠的時候，才縮小，其縮小的比例是依據 flex-shrink 的值進行設置。默認值為 1 。

容器空間不足時，項將等比縮放，如果一個項的 flex-shrink 屬性為 0，為 0 的項不縮放。

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

2、3 項的 flex-shrink 屬性為 0。

flex-basis

定義了項占據容器空間的初始大小。默認為 auto ，即項的本來大小，瀏覽器會根據這個屬性，計算容器是否有多余空間。

當設置了項的 width 或 height 時，flex-basis 優先級更高。

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

例如，給第 2 項同時設置了 width 和 flex-basis ，那么在分配剩余空間前先計算出第 2 項的尺寸，然后再分配剩余空間，同時第 2 項的寬度為 flex-basis 設置的值，因為它的優先級高。

.item-2 { width: 100px; flex-basis: 300px;}

align-self

設置單個項的對齊方式，可覆蓋容器的 align-items 屬性。默認值為 auto，表示繼承父元素的 align-items 屬性，如果父元素沒有 align-items 屬性，則等同于 stretch 。根據容器的 flex-direction 設置的方向決定水平或垂直對齊。

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

stretch ：如果項沒有設置高度或者高度為 auto，且沒有父元素的 align-items 屬性 ，則占滿整個容器的高度。

auto ：繼承父元素的 align-items 屬性，如果父元素沒有 align-items 屬性，則等同于 stretch 。

flex-start ：頂端對齊。

flex-end ：底端對齊。

center ：居中對齊。

baseline ：第一行文字的底端 (基線) 對齊。可以設置 line-height 看效果。

flex

flex-grow , flex-shrink 、flex-basis 的簡寫，默認值為 0 1 auto 。后兩個屬性可選。

.item { flex: none | auto | [ || ]}

none ：為 0 0 auto 。

auto ：就是默認值 1 1 auto 。

flex:1; 代表按照容器減去其它項后的尺寸，然后該容器填滿這個尺寸。相當于 flex-grow: 1; 。

總結

水平位置和垂直位置對齊要根據容器的 flex-direction 設置。

本文非原創，根據阮一峰老師《Flex 布局教程》自學整理。對于我個人不好理解的詞句，多讀了幾遍，用我個人理解的意思表達，但整體思路和順序，依然遵循阮一峰老師的文章。

最近記性特別不好，居然忘記 Flex 布局子項居中怎么寫了，于是又看了一遍阮一峰老師的《Flex 布局教程》，為了能夠加深記憶，邊做記錄邊練習，因此整理本文作為自學筆記。

本文來源：阮一峰老師的《Flex 布局教程》

總結

以上是生活随笔為你收集整理的默认布局换行_自学整理 CSS Flex 布局的全部內容，希望文章能夠幫你解決所遇到的問題。

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