引言

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

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

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

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

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

display: flex | inline-flex

inline-flex 代表容器是個(gè)行內(nèi)元素。

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

容器屬性

flex-direction

項(xiàng)的排列方向。

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

row ：默認(rèn)，水平方向排列，方向起點(diǎn)在左側(cè)。

row-reverse ：水平方向逆向排列，方向起點(diǎn)在右側(cè)。

column ：垂直方向排列，方向起點(diǎn)在頂端。

column-reverse ：垂直方向排列，方向起點(diǎn)在底端。

flex-wrap

項(xiàng)會(huì)自動(dòng)排列在一個(gè)方向上，不會(huì)換行。如果換行顯示，就需要 flex-wrap 屬性。

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

wrap ：默認(rèn)，不換行。

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

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

flex-flow

flex-direction 屬性和 flex-wrap 屬性的簡寫，默認(rèn)值為 row nowrap 。

.container { flex-flow: | ;}

justify-content

項(xiàng) (水平) 對(duì)齊的方式。根據(jù) flex-direction 設(shè)置的方向決定水平或垂直對(duì)齊。

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

flex-start ：默認(rèn)，項(xiàng)左對(duì)齊。

flex-end ：項(xiàng)右對(duì)齊。

center ：項(xiàng)居中對(duì)齊。

space-between ：項(xiàng)兩端對(duì)齊，項(xiàng)之間的間隔相等。

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

align-items

項(xiàng) (垂直) 對(duì)齊的方式。根據(jù) flex-direction 設(shè)置的方向決定水平或垂直對(duì)齊。

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

stretch ：默認(rèn)，如果項(xiàng)沒有設(shè)置高度或者高度為 auto ，則占滿整個(gè)容器的高度。

flex-start ：頂端對(duì)齊。

flex-end ：底端對(duì)齊。

center ：居中對(duì)齊。

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

align-content

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

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

stretch ：默認(rèn)，占滿這個(gè)垂直高度。

flex-start ：頂端對(duì)齊。

flex-end ：底端對(duì)齊。

center ：居中對(duì)齊。

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

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

項(xiàng)屬性

order

定義項(xiàng)的順序。數(shù)值越小，越靠前，默認(rèn)為 0 。

.item { order: ;}

例如：

.item-1 { order: 6;}

flex-grow

.item { flex-grow: ; /* 默認(rèn) 0 */}

定義項(xiàng)的放大比例，默認(rèn)為 0 ，不放大。

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

flex-shrink

項(xiàng)的縮小比例。項(xiàng)僅在默認(rèn)寬度之和大于容器的時(shí)候才會(huì)發(fā)生縮小，也就是說在容器寬度不夠的時(shí)候，才縮小，其縮小的比例是依據(jù) flex-shrink 的值進(jìn)行設(shè)置。默認(rèn)值為 1 。

容器空間不足時(shí)，項(xiàng)將等比縮放，如果一個(gè)項(xiàng)的 flex-shrink 屬性為 0，為 0 的項(xiàng)不縮放。

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

2、3 項(xiàng)的 flex-shrink 屬性為 0。

flex-basis

定義了項(xiàng)占據(jù)容器空間的初始大小。默認(rèn)為 auto ，即項(xiàng)的本來大小，瀏覽器會(huì)根據(jù)這個(gè)屬性，計(jì)算容器是否有多余空間。

當(dāng)設(shè)置了項(xiàng)的 width 或 height 時(shí)，flex-basis 優(yōu)先級(jí)更高。

.item { flex-basis: | auto; /* 默認(rèn) auto */}

例如，給第 2 項(xiàng)同時(shí)設(shè)置了 width 和 flex-basis ，那么在分配剩余空間前先計(jì)算出第 2 項(xiàng)的尺寸，然后再分配剩余空間，同時(shí)第 2 項(xiàng)的寬度為 flex-basis 設(shè)置的值，因?yàn)樗膬?yōu)先級(jí)高。

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

align-self

設(shè)置單個(gè)項(xiàng)的對(duì)齊方式，可覆蓋容器的 align-items 屬性。默認(rèn)值為 auto，表示繼承父元素的 align-items 屬性，如果父元素沒有 align-items 屬性，則等同于 stretch 。根據(jù)容器的 flex-direction 設(shè)置的方向決定水平或垂直對(duì)齊。

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

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

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

flex-start ：頂端對(duì)齊。

flex-end ：底端對(duì)齊。

center ：居中對(duì)齊。

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

flex

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

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

none ：為 0 0 auto 。

auto ：就是默認(rèn)值 1 1 auto 。

flex:1; 代表按照容器減去其它項(xiàng)后的尺寸，然后該容器填滿這個(gè)尺寸。相當(dāng)于 flex-grow: 1; 。

總結(jié)

水平位置和垂直位置對(duì)齊要根據(jù)容器的 flex-direction 設(shè)置。

本文非原創(chuàng)，根據(jù)阮一峰老師《Flex 布局教程》自學(xué)整理。對(duì)于我個(gè)人不好理解的詞句，多讀了幾遍，用我個(gè)人理解的意思表達(dá)，但整體思路和順序，依然遵循阮一峰老師的文章。

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。