溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在網頁布局的學習中，我們經常會遇到彈性（Flex）布局，那么彈性（Flex）布局究竟是什么樣子的呢？相信你學完了本篇文章就會明白Flex（彈性）布局的真正的意思了。
什么是Flexbox ？
Flexbox 是 flexible box 的簡稱（注：意思是“靈活的盒子容器”），是 CSS3 引入的新的布局模式。它決定了元素如何在頁面上排列，使它們能在不同的屏幕尺寸和設備下可預測地展現出來。
它之所以被稱為 Flexbox ，是因為它能夠擴展和收縮 flex 容器內的元素，以最大限度地填充可用空間。與以前布局方式（如 table 布局和浮動元素內嵌塊元素）相比，Flexbox 是一個更強大的方式：
1、在不同方向排列元素
2、重新排列元素的顯示順序
3、更改元素的對齊方式
4、動態地將元素裝入容器
視頻教程推薦：
flex布局視頻教程推薦：2020最新5個flex彈性布局視頻教程
什么情況下不建議使用 Flexbox ？
雖然 Flexbox 非常適合縮放，對齊和重新排序元素，但以下情況應該盡量避免使用 Flexbox 布局：
1、整體頁面布局
2、完全支持舊瀏覽器的網站
瀏覽器支持 Flexbox 的情況：
舊版瀏覽器，如IE 11或更低版本，不支持或僅部分支持 Flexbox 。如果你想安全的使用頁面正常呈現，你應該退回到其他的 CSS 布局方式，比如結合float 的 display: inline-block 或者 display: table 等。但是，如果您只針對現代瀏覽器，那么 Flexbox 絕對值得一試。
術語
在 Flexbox 模型中，有三個核心概念：
– flex 項（愚人碼頭注：也稱 flex 子元素），需要布局的元素
– flex 容器，其包含 flex 項
– 排列方向（direction），這決定了 flex 項的布局方向（注：更多的文章叫主軸）
最好的學習方式是從經驗和例子中學習，所以讓我們開始吧！
Level 1?—?基礎
1）創建一個 flex 容器
CSS 代碼:
.flex-container {display: flex;}代碼如下：
HTML：
<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> </div>
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;
}效果如下：
要創建一個 flex 容器，您只需要將一個 display: flex 屬性添加到一個元素上。默認情況下，所有的直接子元素都被認為是 flex 項，并從左到右依次排列在一行中。如果 flex 項的寬度總和大于容器，那么 flex 項將按比例縮小，直到它們適應 flex 容器寬度。
2）將 flex 項排成一列
CSS 代碼:
.flex-container {display: flex;flex-direction: column;}代碼如下：
HTML：
<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> </div>
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 容器中)設置 flex-direction: column 使 flex 項垂直布局。也可以通過設置 flex-direction: column-reverse 或 flex-direction: row-reverse 來使 flex 項以相反的順序排列。
CSS 代碼:
.flex-container {display: flex;flex-direction: column-reverse;}代碼如下：
HTML：
<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> </div>
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）靠右對齊的 flex 項
CSS 代碼:
.flex-container {display: flex;justify-content: flex-end;}回想一下，每個 Flexbox 模型都有 flex 方向（主軸）。justify-content 用于指定 flex 項在 flex 方向（direction）上的對齊位置。在上面的例子中，justify-content:flex-end 表示 flex 項在水平方向上靠 flex 容器的末端對齊。這就是為什么他們被放在了右邊。
代碼如下：
HTML：
<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> </div>
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）居中對齊的 flex 項
CSS 代碼:
.flex-container {display: flex;justify-content: center;}代碼如下：
HTML：
<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> </div>
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 項
您可以通過使用以下 justify-content 屬性的三個間距值之一來指定容器中 flex 項之間應顯示多少空間：
space-evenly : flex 容器起始邊緣和第一個 flex 項之間的間距和每個相鄰 flex 項之間的間距是相等。（愚人碼頭注：該屬性以前很少看到，原因是以前瀏覽器不支持，chrome 也是 60 版本之后才支持。延伸一下，align-content: space-evenly 也是這個邏輯，建議在 chrome 60 下查看 這個demo 。 ）
space-between : 任何兩個相鄰 flex 項之間的間距是相同的，但不一定等于第一個/最后一個 flex 項與 flex 容器邊緣之間的間距;起始邊緣和第一個項目之間的間距和末端邊緣和最后一個項目之間的間距是相等的。
space-around : flex 容器中的每個 flex 項的每一側間距都是相等的。請注意，這意味著兩個相鄰 flex 項之間的空間將是第一個/最后一個 flex 項與其最近邊緣之間的空間的兩倍。
注：網上找了一張圖片能更好的解釋 justify-content 屬性值的表現，如圖：
4）flex 項在交叉軸上的對齊
CSS 代碼:
.flex-container {display: flex;justify-content: center;align-items: center;}通常，我們想沿著 flex 方向（主軸）排列 flex 項，還可以在垂直于它的方向（交叉軸）上對齊 flex 項。通過設置 justify-content:center和align-items:center，可以使 flex 項水平和垂直放置在 flex 容器的中心。
代碼如下：
HTML：
<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2 <br />2<br />2</div> <div class="flex-item">3 <br />3<br /> 3<br /> 3<br /> 3</div> </div>
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）對齊某個特定的 flex 項
CSS 代碼:
.flex-container {display: flex;align-items: center;}
.flex-bottom {align-self: flex-end;}可以在某個特定的 flex 項上使用 align-self CSS 屬性，來使該特定的 flex 項與容器中的其他 flex 項進行對齊。
代碼如下：
HTML：
<div class="flex-container"> <div class="flex-item flex-bottom">1</div> <div class="flex-item">2 <br />2<br />2</div> <div class="flex-item">3 <br />3<br /> 3<br /> 3<br /> 3</div> </div>
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?—?中級
1）允許 flex 項多行/列排列
CSS 代碼:
.flex-container {display: flex;flex-wrap: wrap;}默認情況下， flex 項不允許多行/列排列，如果 flex 容器尺寸對于所有 flex 項來說不夠大，那么flex 項將被調整大小以適應單行或列排列。
通過添加 flex-wrap: wrap ，可以將溢出容器的 flex 項將被排列到另一行/列中。
代碼如下：
HTML：
<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> <div class="flex-item">7</div> <div class="flex-item">8</div> </div>
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 項反向多行/列排列
CSS 代碼:
.flex-container {display: flex;flex-wrap: wrap-reverse;}flex-wrap:wrap-reverse 仍然使 flex 項以多行/列排列，但是它們從 flex 容器的末尾開始排列的。
代碼如下：
HTML：
<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> <div class="flex-item">7</div> <div class="flex-item">8</div> </div>
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 項在交叉軸上的對齊方式
CSS 代碼:
.flex-container {display: flex;flex-wrap: wrap;align-content: flex-start;}默認情況下，當 flex 容器的交叉軸（cross axis）上存在多余空間時，您可以在 flex 容器上設置 align-content，以控制 flex 項在交叉軸（cross axis）上的對齊方式。可能的值是 flex-start，flex-end，center，space-between，space-around ，space-evenly 和 stretch（默認）。
代碼如下：
HTML：
<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> <div class="flex-item">7</div> <div class="flex-item">8</div> </div>
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?—?高級
1）拉伸 flex 項
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 容器中有剩余空間時才會生效。flex 項的 flex-grow 屬性指定該 flex 項相對于其他 flex 項將拉伸多少，以填充 flex 容器。默認值為1。當設置為 0 時，該 flex 項將不會被拉伸去填補剩余空間。在這個例子中，兩個項的比例是 1:2，意思是在被拉伸時，第一個 flex 項將占用 1/3，而第二個 flex 項將占據余下的空間。
注：這里特別要注意的是 flex-grow 控制的是 flex 項的拉伸比例，而不是占據 flex 容器的空間比例。
代碼如下：
HTML：
<div class="flex-container"> <div class="flex-item flex-item1">1</div> <div class="flex-item flex-item2">2</div> <div class="flex-item flex-item3">3</div> </div> <button class="w90">容器寬度設置為初始寬度90px</button> <button class="w180">容器寬度設置為：180px</button> <button class="w270">容器寬度設置為：270px</button>
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 容器空間不足時才會生效。它指定 flex 項相對于其他 flex 項將縮小多少，以使 flex 項不會溢出 flex 容器。 默認值為 1。當設置為0時，該 flex 項將不會被收縮。在這個例子中，比例是1：2，意思是在收縮時，第一項將收縮 1/3 ，而第二個項目將被收縮 2/3 。
注： flex-shrink 和 flex-grow 正好相反
代碼如下：
HTML：
<div class="flex-container"> <div class="flex-item flex-item1">1</div> <div class="flex-item flex-item2">2</div> <div class="flex-item flex-item3">3</div> </div> <button class="w90">容器寬度設置為：90px</button> <button class="w180">容器寬度設置為：180px</button> <button class="w270">容器寬度設置為初始寬度270px</button>
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）設置元素的大小
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 項尺寸來代替元素的初始大小。默認情況下，其值為 flex-basis: auto，這意味該尺寸著從非 Flexbox CSS規則計算的。您還可以將其設置為某個絕對值或相對于 flex 容器百分比的值;例如 flex-basis:200px 和flex-basis:10％。
代碼如下：
HTML：
<div class="flex-container"> <div class="flex-item flex-item1">1</div> <div class="flex-item flex-item2">2</div> </div>
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 的縮寫。在這個例子中，第一個 flex 項設置為flex-grow: 1，flex-shrink: 0，flex-basis: 100px，第二個 flex 項設置為flex-grow: 2，flex-shrink: 0，flex-basis: 10％。
代碼如下：
HTML：
<div class="flex-container"> <div class="flex-item flex-item1">1</div> <div class="flex-item flex-item2">2</div> </div>
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;
}效果如下：
分析一下上面的這個例子，由于在 flex 容器（200px）中存在剩余空間 (90px)，只有 flex-grow 才能起作用，flew-shrink 被忽略。第一個 flex 項的flex-grow 為 1，第2個 flex 項的flex-grow 為 2，所以第1個 flex 項拉伸 30px，第2個 flex 項拉伸 60px。
以上就是什么是彈性（Flex）布局 ？15分鐘弄懂Flex布局的詳細內容，更多請關注億速云其它相關文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
