CSS 彈性盒子 Flexbox 布局

Flexbox（彈性盒子）是 CSS3 中引入的一種強(qiáng)大且兼容性好的布局方法。使用 flexbox，可以很容易地處理好頁面上的元素布局，并創(chuàng)建可以自動(dòng)縮小和放大的動(dòng)態(tài)用戶界面。

10余年專注成都網(wǎng)站制作，企業(yè)網(wǎng)站設(shè)計(jì)，個(gè)人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識(shí)、方案，網(wǎng)站設(shè)計(jì)流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站設(shè)計(jì),高端網(wǎng)頁制作,對(duì)除甲醛等多個(gè)領(lǐng)域，擁有多年設(shè)計(jì)經(jīng)驗(yàn)。

flex 盒子模式

只要在一個(gè)元素的 CSS 中添加 display: flex;，就可以使用其它 flex 屬性來構(gòu)建響應(yīng)式頁面了。

#box-container {
 display: flex;
}

行，列 Row Culomn

給元素添加 display: flex 屬性可以讓它變成 flex 容器， 然后可以讓元素的項(xiàng)目排列成行或列。 只要給父元素添加 flex-direction 屬性，并把屬性值設(shè)置為 row 或 column，即可橫向排列或縱向排列它的所有子元素。 創(chuàng)建一行將使子項(xiàng)水平對(duì)齊，創(chuàng)建一列將使子項(xiàng)垂直對(duì)齊。

flex-direction 的其他可選值還有 row-reverse 和 column-reverse。

注意： flex-direction 的默認(rèn)值為 row。

#box-container {
 display: flex;
 flex-direction: row; 
 /* flex-direction: column */
}

父元素對(duì)齊 Align

子元素排列的方向被稱為 main axis（主軸）。 對(duì)于行，主軸水平貫穿每一個(gè)項(xiàng)目； 對(duì)于列，主軸垂直貫穿每一個(gè)項(xiàng)目。

對(duì)于如何沿主軸線排放 flex 項(xiàng)目，有幾種選擇。 很常用的一種是 justify-content: center;：即 flex 子元素在 flex 容器中居中排列。 其他選擇包括：

• flex-start：從 flex 容器的起始位置開始排列項(xiàng)目。 對(duì)行來說是把項(xiàng)目移至左邊， 對(duì)于列是把項(xiàng)目移至頂部。 如未設(shè)置 justify-content 的值，那么這就是默認(rèn)值。

• flex-end：從 flex 容器的終止位置開始排列項(xiàng)目。 對(duì)行來說是把項(xiàng)目移至右邊， 對(duì)于列是把項(xiàng)目移至底部。

• space-between：項(xiàng)目間保留一定間距地沿主軸居中排列。 第一個(gè)和最后一個(gè)項(xiàng)目被放置在容器邊沿。 例如，在行中第一個(gè)項(xiàng)目會(huì)緊貼著容器左邊，最后一個(gè)項(xiàng)目會(huì)緊貼著容器右邊，然后其他項(xiàng)目均勻排布。

• space-around：與space-between相似，但頭尾兩個(gè)項(xiàng)目不會(huì)緊貼容器邊緣，所有項(xiàng)目之間的空間均勻排布。

• space-evenly：頭尾兩個(gè)項(xiàng)目不會(huì)緊貼容器邊緣，所有項(xiàng)目之間的空間均勻排布。

#box-container {
 justify-content: center;
}

Flex 容器中，與主軸垂直的叫做 cross axis（交叉軸）。 行的交叉軸是垂直的，列的交叉軸是水平的。

CSS 中的 align-items 屬性用來定義 flex 子元素沿交叉軸的對(duì)齊方式。 對(duì)行來說，定義的是元素的上下對(duì)齊方式； 對(duì)列來說，是定義元素的左右對(duì)齊方式。

align-items 的可選值包括：

• flex-start：從 flex 容器的起始位置開始對(duì)齊項(xiàng)目。 對(duì)行來說，把項(xiàng)目移至容器頂部； 對(duì)列來說，是把項(xiàng)目移至容器左邊。

• flex-end：從 flex 容器的終止位置開始對(duì)齊項(xiàng)目。 對(duì)行來說，把項(xiàng)目移至容器底部； 對(duì)列來說，把項(xiàng)目移至容器右邊。

• center：把項(xiàng)目居中放置。 對(duì)行來說，垂直居中（項(xiàng)目距離頂部和底部的距離相等）； 對(duì)列來說，水平居中（項(xiàng)目距離左邊和右邊的距離相等）。

• stretch：拉伸項(xiàng)目，填滿 flex 容器。 例如，排成行的項(xiàng)目從容器頂部拉伸到底部。 如未設(shè)置align-items的值，那么這就是默認(rèn)值。

• baseline：沿基線對(duì)齊。 基線是文本相關(guān)的概念，可以認(rèn)為它是字母排列的下端基準(zhǔn)線。

#box-container {
 align-items: center;
}

換行 Wrap

CSS flexbox 有一個(gè)把 flex 子元素拆分為多行（或多列）的特性。

默認(rèn)情況下，flex 容器會(huì)調(diào)整項(xiàng)目大小，把它們都塞到一起。 對(duì)于行來說，所有項(xiàng)目都會(huì)在一條直線上。

不過，使用 flex-wrap 屬性可以使項(xiàng)目換行展示。 這意味著多出來的子元素會(huì)被移到新的行或列。 換行發(fā)生的斷點(diǎn)由子元素和容器的大小決定。

換行方向的可選值有這些：

• nowrap：默認(rèn)值，不換行。

• wrap：如果排列以行為基準(zhǔn)，就將行從上往下排列；如果排列以列為基準(zhǔn)，就將列從左往右排列。

• wrap-reverse：如果排列以行為基準(zhǔn)，就將行從下往上排列；如果排列以列為基準(zhǔn)，就將列從右往左排列。

#box-container {
 flex-wrap: wrap;
}

收縮 Shrink

上面提到的屬性都是應(yīng)用于 flex 容器（flex 子元素的父元素）的。 除此之外，flex 子元素也有很多實(shí)用屬性。

首先介紹的是 flex-shrink 屬性。 使用之后，如果 flex 容器太小，則子元素會(huì)自動(dòng)縮小。 當(dāng)容器的寬度小于里面所有子元素的寬度之和時(shí)，所有子元素都會(huì)自動(dòng)壓縮。

子元素的 flex-shrink 接受數(shù)值作為屬性值。 數(shù)值越大，則該元素與其他元素相比會(huì)被壓縮得更厲害。 比如，一個(gè)項(xiàng)目的 flex-shrink 屬性值為 1，另一個(gè)項(xiàng)目的 flex-shrink 屬性值為 3，那么后者相比前者會(huì)受到 3 倍壓縮。

#box-1 {
 flex-shrink: 1;
}
#box-2 {
 flex-shrink: 2;
}

擴(kuò)大 Grow

與 flex-shrink 相對(duì)的是 flex-grow。flex-grow會(huì)在容器太大時(shí)對(duì)子元素作出調(diào)整。

如果一個(gè)項(xiàng)目的 flex-grow 屬性值為 1，另一個(gè)項(xiàng)目的 flex-grow 屬性值為 3，那么值為 3 的一個(gè)會(huì)較另一個(gè)擴(kuò)大 3 倍。

#box-1 {
 flex-grow: 1;
}
#box-2 {
 flex-grow: 2;
}

初始大小 Basis

flex-basis 屬性定義了在使用 CSS 的 flex-shrink 或 flex-grow 屬性對(duì)元素進(jìn)行調(diào)整前，元素的初始大小。

flex-basis 屬性的單位與其他表示尺寸的屬性的單位一致（px、em、% 等）。 如果值為 auto，則項(xiàng)目的尺寸隨內(nèi)容調(diào)整。

#box-1 {
 flex-basis: 10em;
}
#box-2 {
 flex-basis: 20em;
}

簡寫 Shorthand

上面幾個(gè) flex 屬性有一個(gè)簡寫方式。 flex-grow、flex-shrink和 flex-basis 屬性可以在 flex中一并設(shè)置。

例如，flex: 1 0 10px; 會(huì)把項(xiàng)目屬性設(shè)為 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。

屬性的默認(rèn)設(shè)置是 flex: 0 1 auto;。

#box-1 {
  flex: 2 2 150px;
}
#box-2 {
  flex: 1 1 150px;
}

重新排列 Rearrange

order 屬性告訴 CSS flex 容器里子元素的順序。 默認(rèn)情況下，項(xiàng)目排列順序與源 HTML 文件中順序相同。 這個(gè)屬性接受數(shù)字作為參數(shù)，可以使用負(fù)數(shù)。

#box-1 {
  order: 2;
}
#box-2 {
  order: 1;
}

子元素對(duì)齊方式 Align

align-self。 這個(gè)屬性允許調(diào)整單個(gè)子元素自己的對(duì)齊方式，而不會(huì)影響到全部子元素。 因?yàn)?float、clear 和 vertical-align 等調(diào)整對(duì)齊方式的屬性都不能應(yīng)用于 flex 子元素，所以這個(gè)屬性顯得十分有用。

align-self 可設(shè)置的值與 align-items 的一樣，并且它會(huì)覆蓋 align-items 所設(shè)置的值。

#box-1 {
  align-self: center;
}
#box-2 {
  align-self: flex-end;
}