在網(wǎng)頁布局的學(xué)習(xí)中，我們經(jīng)常會(huì)遇到彈性（Flex）布局，那么彈性（Flex）布局究竟是什么樣子的呢？相信你學(xué)完了本篇文章就會(huì)明白Flex（彈性）布局的真正的意思了。

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供鐵西網(wǎng)站建設(shè)、鐵西做網(wǎng)站、鐵西網(wǎng)站設(shè)計(jì)、鐵西網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、鐵西企業(yè)網(wǎng)站模板建站服務(wù)，十年鐵西做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

什么是Flexbox ？

Flexbox 是 flexible box 的簡(jiǎn)稱（注：意思是“靈活的盒子容器”），是 CSS3 引入的新的布局模式。它決定了元素如何在頁面上排列，使它們能在不同的屏幕尺寸和設(shè)備下可預(yù)測(cè)地展現(xiàn)出來。

它之所以被稱為 Flexbox ，是因?yàn)樗軌驍U(kuò)展和收縮 flex 容器內(nèi)的元素，以最大限度地填充可用空間。與以前布局方式（如 table 布局和浮動(dòng)元素內(nèi)嵌塊元素）相比，F(xiàn)lexbox 是一個(gè)更強(qiáng)大的方式：

1、在不同方向排列元素

2、重新排列元素的顯示順序

3、更改元素的對(duì)齊方式

4、動(dòng)態(tài)地將元素裝入容器

視頻教程推薦：

flex布局視頻教程推薦：2020最新5個(gè)flex彈性布局視頻教程

什么情況下不建議使用 Flexbox ？

雖然 Flexbox 非常適合縮放，對(duì)齊和重新排序元素，但以下情況應(yīng)該盡量避免使用 Flexbox 布局：

1、整體頁面布局

2、完全支持舊瀏覽器的網(wǎng)站

瀏覽器支持 Flexbox 的情況：

舊版瀏覽器，如IE 11或更低版本，不支持或僅部分支持 Flexbox 。如果你想安全的使用頁面正常呈現(xiàn)，你應(yīng)該退回到其他的 CSS 布局方式，比如結(jié)合float 的 display: inline-block 或者 display: table 等。但是，如果您只針對(duì)現(xiàn)代瀏覽器，那么 Flexbox 絕對(duì)值得一試。

術(shù)語

在 Flexbox 模型中，有三個(gè)核心概念：
– flex 項(xiàng)（愚人碼頭注：也稱 flex 子元素），需要布局的元素
– flex 容器，其包含 flex 項(xiàng)
– 排列方向（direction），這決定了 flex 項(xiàng)的布局方向（注：更多的文章叫主軸）

最好的學(xué)習(xí)方式是從經(jīng)驗(yàn)和例子中學(xué)習(xí)，所以讓我們開始吧！

Level 1?—?基礎(chǔ)

1）創(chuàng)建一個(gè) flex 容器

CSS 代碼:

.flex-container {display: flex;}

代碼如下：

HTML：

  
1
2

CSS：

.flex-container {
  display: flex;
}
/* 以下為輔助樣式 */
.flex-container{ 
  background-color: #F0f0f0; 
}
.flex-container .flex-item{
  padding:20px;
  background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
  background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
  background-color: #90D9F7; 
}

效果如下：

要?jiǎng)?chuàng)建一個(gè) flex 容器，您只需要將一個(gè) display: flex 屬性添加到一個(gè)元素上。默認(rèn)情況下，所有的直接子元素都被認(rèn)為是 flex 項(xiàng)，并從左到右依次排列在一行中。如果 flex 項(xiàng)的寬度總和大于容器，那么 flex 項(xiàng)將按比例縮小，直到它們適應(yīng) flex 容器寬度。

2）將 flex 項(xiàng)排成一列

CSS 代碼:

.flex-container {display: flex;flex-direction: column;}

代碼如下：

HTML：

  
1
2

CSS：

.flex-container {
  display: flex;
  flex-direction: column;
}
/* 以下為輔助樣式 */
.flex-container{ 
  background-color: #F0f0f0; 
}
.flex-container .flex-item{
  padding:20px;
  background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
  background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
  background-color: #90D9F7; 
}

效果如下：

可以通過(在 flex 容器中)設(shè)置 flex-direction: column 使 flex 項(xiàng)垂直布局。也可以通過設(shè)置 flex-direction: column-reverse 或 flex-direction: row-reverse 來使 flex 項(xiàng)以相反的順序排列。

CSS 代碼:

.flex-container {display: flex;flex-direction: column-reverse;}

代碼如下：

HTML：

  
1
2

CSS：

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}
/* 以下為輔助樣式 */
.flex-container{ 
  background-color: #F0f0f0; 
}
.flex-container .flex-item{
  padding:20px;
  background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
  background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
  background-color: #90D9F7; 
}

效果如下：

Level 2?—?新手

1）靠右對(duì)齊的 flex 項(xiàng)

CSS 代碼:

.flex-container {display: flex;justify-content: flex-end;}

回想一下，每個(gè) Flexbox 模型都有 flex 方向（主軸）。justify-content 用于指定 flex 項(xiàng)在 flex 方向（direction）上的對(duì)齊位置。在上面的例子中，justify-content:flex-end 表示 flex 項(xiàng)在水平方向上靠 flex 容器的末端對(duì)齊。這就是為什么他們被放在了右邊。

代碼如下：

HTML：

  
1
2

CSS：

.flex-container {
  display: flex;
  justify-content: flex-end;
}
/* 以下為輔助樣式 */
.flex-container{ 
  background-color: #F0f0f0; 
}
.flex-container .flex-item{
  padding:20px;
  background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
  background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
  background-color: #90D9F7; 
}

效果如下：

2）居中對(duì)齊的 flex 項(xiàng)

CSS 代碼:

.flex-container {display: flex;justify-content: center;}

代碼如下：

HTML：

  
1
2

CSS：

.flex-container {
  display: flex;
  justify-content: center;
}
/* 以下為輔助樣式 */
.flex-container{ 
  background-color: #F0f0f0; 
}
.flex-container .flex-item{
  padding:20px;
  background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
  background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
  background-color: #90D9F7; 
}

效果如下：

3）鋪開的 flex 項(xiàng)

您可以通過使用以下 justify-content 屬性的三個(gè)間距值之一來指定容器中 flex 項(xiàng)之間應(yīng)顯示多少空間：

space-evenly :flex 容器起始邊緣和第一個(gè) flex 項(xiàng)之間的間距和每個(gè)相鄰 flex 項(xiàng)之間的間距是相等。（愚人碼頭注：該屬性以前很少看到，原因是以前瀏覽器不支持，chrome 也是 60 版本之后才支持。延伸一下，align-content: space-evenly 也是這個(gè)邏輯，建議在 chrome 60 下查看 這個(gè)demo 。 ）

space-between :任何兩個(gè)相鄰 flex 項(xiàng)之間的間距是相同的，但不一定等于第一個(gè)/最后一個(gè)  flex 項(xiàng)與 flex 容器邊緣之間的間距;起始邊緣和第一個(gè)項(xiàng)目之間的間距和末端邊緣和最后一個(gè)項(xiàng)目之間的間距是相等的。

space-around :flex 容器中的每個(gè) flex 項(xiàng)的每一側(cè)間距都是相等的。請(qǐng)注意，這意味著兩個(gè)相鄰 flex 項(xiàng)之間的空間將是第一個(gè)/最后一個(gè) flex 項(xiàng)與其最近邊緣之間的空間的兩倍。

注：網(wǎng)上找了一張圖片能更好的解釋  justify-content 屬性值的表現(xiàn)，如圖：

4）flex 項(xiàng)在交叉軸上的對(duì)齊

CSS 代碼:

.flex-container {display: flex;justify-content: center;align-items: center;}

通常，我們想沿著 flex 方向（主軸）排列 flex 項(xiàng)，還可以在垂直于它的方向（交叉軸）上對(duì)齊 flex 項(xiàng)。通過設(shè)置 justify-content:center和align-items:center，可以使 flex 項(xiàng)水平和垂直放置在 flex 容器的中心。

代碼如下：

HTML：

  
1
2 
2
2
3 
3
 3
 3
 3

CSS：

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 以下為輔助樣式 */
.flex-container{ 
  background-color: #F0f0f0; 
}
.flex-container .flex-item{
  padding:20px;
  background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
  background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
  background-color: #90D9F7; 
}

效果如下：

5）對(duì)齊某個(gè)特定的 flex 項(xiàng)

CSS 代碼:

.flex-container {display: flex;align-items: center;}
.flex-bottom {align-self: flex-end;}

可以在某個(gè)特定的 flex 項(xiàng)上使用 align-self CSS 屬性，來使該特定的 flex 項(xiàng)與容器中的其他 flex 項(xiàng)進(jìn)行對(duì)齊。

代碼如下：

HTML：

  
1
2 
2
2
3 
3
 3
 3
 3

CSS：

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-bottom {
  align-self: flex-end;
}
/* 以下為輔助樣式 */
.flex-container{ 
  background-color: #F0f0f0; 
}
.flex-container .flex-item{
  padding:20px;
  background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
  background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
  background-color: #90D9F7; 
}

效果如下：

Level 3?—?中級(jí)

1）允許 flex 項(xiàng)多行/列排列

CSS 代碼:

.flex-container {display: flex;flex-wrap: wrap;}

默認(rèn)情況下， flex 項(xiàng)不允許多行/列排列，如果 flex 容器尺寸對(duì)于所有 flex 項(xiàng)來說不夠大，那么flex 項(xiàng)將被調(diào)整大小以適應(yīng)單行或列排列。
通過添加 flex-wrap: wrap ，可以將溢出容器的 flex 項(xiàng)將被排列到另一行/列中。

代碼如下：

HTML：

  
  
1
  
2
  
3
  
4
  
5
  
6
  
7
8

CSS：

.flex-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
/* 以下為輔助樣式 */
.flex-container{ 
  width:270px;
  background-color: #F0f0f0; 
}
.flex-container .flex-item{
  padding:20px;
  background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
  background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
  background-color: #90D9F7; 
}

效果如下：

2）flex 項(xiàng)反向多行/列排列

CSS 代碼:

.flex-container {display: flex;flex-wrap: wrap-reverse;}

flex-wrap:wrap-reverse 仍然使 flex 項(xiàng)以多行/列排列，但是它們從 flex 容器的末尾開始排列的。

代碼如下：

HTML：

  
  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8

CSS：

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}
/* 以下為輔助樣式 */
.flex-container{ 
  width:270px;
  background-color: #F0f0f0; 
}
.flex-container .flex-item{
  padding:20px;
  background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
  background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
  background-color: #90D9F7; 
}

效果如下：

3）多行/列排列的 flex 項(xiàng)在交叉軸上的對(duì)齊方式

CSS 代碼:

.flex-container {display: flex;flex-wrap: wrap;align-content: flex-start;}

默認(rèn)情況下，當(dāng) flex 容器的交叉軸（cross axis）上存在多余空間時(shí)，您可以在 flex 容器上設(shè)置 align-content，以控制 flex 項(xiàng)在交叉軸（cross axis）上的對(duì)齊方式?？赡艿闹凳?flex-start，flex-end，center，space-between，space-around ，space-evenly 和 stretch（默認(rèn)）。

代碼如下：

HTML：

  
  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8

CSS：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: space-evenly;
}
/* 以下為輔助樣式 */
.flex-container{ 
  width:270px;
  height:200px;
  background-color: #F0f0f0; 
}
.flex-container .flex-item{
  padding:20px;
  height:20px;
  background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
  background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
  background-color: #90D9F7; 
}

效果如下：

Level 4?—?高級(jí)

1）拉伸 flex 項(xiàng)

CSS 代碼:

.flex-container {display: flex;}
.flex-item.nth-of-type(1){flex-grow: 1;}
.flex-item.nth-of-type(2) {flex-grow: 2;}

flex-grow 只有在 flex 容器中有剩余空間時(shí)才會(huì)生效。flex 項(xiàng)的 flex-grow 屬性指定該 flex 項(xiàng)相對(duì)于其他 flex 項(xiàng)將拉伸多少，以填充 flex 容器。默認(rèn)值為1。當(dāng)設(shè)置為 0 時(shí)，該 flex 項(xiàng)將不會(huì)被拉伸去填補(bǔ)剩余空間。在這個(gè)例子中，兩個(gè)項(xiàng)的比例是 1:2，意思是在被拉伸時(shí)，第一個(gè) flex 項(xiàng)將占用 1/3，而第二個(gè) flex 項(xiàng)將占據(jù)余下的空間。

注：這里特別要注意的是 flex-grow 控制的是 flex 項(xiàng)的拉伸比例，而不是占據(jù) flex 容器的空間比例。

代碼如下：

HTML：

  
  
1
  
2
  
3

容器寬度設(shè)置為初始寬度90px
容器寬度設(shè)置為：180px
容器寬度設(shè)置為：270px

CSS：

.flex-container {
  display: flex;
}
.flex-item1{flex-grow: 0;}
.flex-item2{flex-grow: 1;}
.flex-item3{flex-grow: 2;}
/* 以下為輔助樣式 */
.flex-container{ 
  width:90px;
  padding:10px;
  background-color: #F0f0f0; 
}
.flex-container .flex-item{
  padding:20px 0;
  text-align: center;
  width:30px;
  background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
  background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
  background-color: #90D9F7; 
}

JS：

var $flexContainer=$(".flex-container")
$(".w90").on("click",function(){
  $flexContainer.width("90px")
})
$(".w180").on("click",function(){
  $flexContainer.width("180px")
})
$(".w270").on("click",function(){
  $flexContainer.width("270px")
})

效果如下：

2）收縮元素

CSS 代碼:

.flex-container {display: flex;}
.flex-item:nth-of-type(1) {flex-shrink: 1;}
.flex-item:nth-of-type(2) {flex-shrink: 2;}

flex-shrink 只有在 flex 容器空間不足時(shí)才會(huì)生效。它指定 flex 項(xiàng)相對(duì)于其他 flex 項(xiàng)將縮小多少，以使 flex 項(xiàng)不會(huì)溢出 flex 容器。 默認(rèn)值為 1。當(dāng)設(shè)置為0時(shí)，該 flex 項(xiàng)將不會(huì)被收縮。在這個(gè)例子中，比例是1：2，意思是在收縮時(shí)，第一項(xiàng)將收縮 1/3 ，而第二個(gè)項(xiàng)目將被收縮 2/3 。

注： flex-shrink 和 flex-grow 正好相反

代碼如下：

HTML：

  
  
1
  
2
  
3

容器寬度設(shè)置為：90px
容器寬度設(shè)置為：180px
容器寬度設(shè)置為初始寬度270px

CSS：

.flex-container {
  display: flex;
}
.flex-item1{flex-shrink: 0;}
.flex-item2{flex-shrink: 1;}
.flex-item3{flex-shrink: 2;}
/* 以下為輔助樣式 */

.flex-container{ 
  width:270px;
  padding:10px;
  background-color: #F0f0f0; 
}
.flex-container .flex-item{
  padding:20px 0;
  text-align: center;
  width:90px;
  background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
  background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
  background-color: #90D9F7; 
}

JS：

var $flexContainer=$(".flex-container")
$(".w90").on("click",function(){
  $flexContainer.width("90px")
})
$(".w180").on("click",function(){
  $flexContainer.width("180px")
})
$(".w270").on("click",function(){
  $flexContainer.width("270px")
})

效果如下：

3）設(shè)置元素的大小

CSS 代碼:

.flex-container {display: flex;}
.flex-item.nth-of-type(1) {flex-basis: 200px;}
.flex-item.nth-of-type(2) {flex-basis: 10%;}

您可以使用 flex-basis 定制 flex 項(xiàng)尺寸來代替元素的初始大小。默認(rèn)情況下，其值為 flex-basis: auto，這意味該尺寸著從非 Flexbox CSS規(guī)則計(jì)算的。您還可以將其設(shè)置為某個(gè)絕對(duì)值或相對(duì)于 flex 容器百分比的值;例如 flex-basis:200px 和flex-basis:10％。

代碼如下：

HTML：

  
  
1
  
2

CSS：

.flex-container {
  display: flex;
}
.flex-item1{flex: 1 0 90px;}
.flex-item2{flex: 2 0 10%;}
/* 以下為輔助樣式 */
.flex-container{ 
  width:200px;
  padding:10px;
  background-color: #F0f0f0; 
}
.flex-container .flex-item{
  padding:20px 0;
  text-align: center;
  background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
  background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
  background-color: #90D9F7; 
}

效果如下：

4）將 flex-grow, flex-shrink, 和 flex-basis 放在一起

CSS 代碼:

.flex-container {display: flex;}
.flex-item:nth-of-type(1) {flex: 1 0 100px;}
.flex-item:nth-of-type(2) {flex: 2 0 10%;}

flex 是 flex-grow，flex-shrink 和 flex-based 的縮寫。在這個(gè)例子中，第一個(gè) flex 項(xiàng)設(shè)置為flex-grow: 1，flex-shrink: 0，flex-basis: 100px，第二個(gè) flex 項(xiàng)設(shè)置為flex-grow: 2，flex-shrink: 0，flex-basis: 10％。

代碼如下：

HTML：

  
  
1
  
2

CSS：

.flex-container {
  display: flex;
}
.flex-item1{flex: 1 0 90px;}
.flex-item2{flex: 2 0 10%;}
/* 以下為輔助樣式 */
.flex-container{ 
  width:200px;
  padding:10px;
  background-color: #F0f0f0; 
}
.flex-container .flex-item{
  padding:20px 0;
  text-align: center;
  background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
  background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
  background-color: #90D9F7; 
}

效果如下：

分析一下上面的這個(gè)例子，由于在 flex 容器（200px）中存在剩余空間 (90px)，只有 flex-grow 才能起作用，flew-shrink 被忽略。第一個(gè) flex 項(xiàng)的flex-grow 為 1，第2個(gè) flex 項(xiàng)的flex-grow 為 2，所以第1個(gè) flex 項(xiàng)拉伸 30px，第2個(gè) flex 項(xiàng)拉伸 60px。

以上就是什么是彈性（Flex）布局 ？15分鐘弄懂Flex布局的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！