内容简介：Flexbox 為 CCS 3 所引進的新 Layout，新的 CSS Framework 如 Bootstrap 4、Vuetify 都是使用 Flexbox，雖然 Framework 提供了 Class 或 Property 讓你簡單使用，但其骨子裡仍是 CSS 3 的 Flexbox，因此深入了解是必須的。CSS 3
Flexbox 為 CCS 3 所引進的新 Layout，新的 CSS Framework 如 Bootstrap 4、Vuetify 都是使用 Flexbox，雖然 Framework 提供了 Class 或 Property 讓你簡單使用，但其骨子裡仍是 CSS 3 的 Flexbox，因此深入了解是必須的。
Version
CSS 3
Layout
RGB 由左向右 均分 container。
HTML
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
</div>
</body>
</html>
要對 3 個 <div> 做 layout。
CSS
style.css
.box {
display: flex;
width: 960px;
height: 240px;
margin: auto;
}
.item {
width: 320px;
}
.item1 {
background-color: #f00;
}
.item2 {
background-color: #0f0;
}
.item3 {
background-color: #00f;
}
第 1 行
.box {
display: flex;
width: 960px;
height: 240px;
margin: auto;
}
只要在 container 加上 display: flex ，則表示該 container 內要使用 flexbox。
12 行
.item1 {
background-color: #f00;
}
.item2 {
background-color: #0f0;
}
.item3 {
background-color: #00f;
}
設定每個 item 不同顏色方便顯示。
將 3 個 item 不同顏色分別以 item1 、 item2 與 item3 表示。
第 8 行
.item {
width: 320px;
}
在使用 flexbox 的 container 內，預設自動 橫向顯示 而不換行，由於 container 總寬為 960px ，若每個 item 都是 320px ，3 個 item 剛好均分 container。
將 3 個 item 共用部分抽出為 item class。
<div> 雖然預設會換行顯示，但在 flexbox 下，會變成 由左向右 橫向顯示 不換行
.item {
width: 300px;
}
若將每個 item 設定為 300px ，三個 item 總和為 900px ，小於 container 的 960px ，由於 item 是 由左往右 ，長到 900px 就停止。
.item {
width: 400px;
}
若將每個 item 設定為 400px ，三個 item 總和為 1200px ，大於 container 的 960px ，但因為 container 為 960px ，所以每個 item 會依 400 : 400 : 400 以 1 : 1 : 1 分配 960px ，所以每個 item 仍為 320px 。
flex-wrap: wrap
Flexbox 的 flex-wrap 預設為 nowrap ，以 container 為主，item 必須配合 container；若設定成 flex-wrap: wrap ，則一切將改變，成為 item 為主。
style.css
.box {
display: flex;
width: 960px;
height: 240px;
margin: auto;
flex-wrap: wrap;
}
.item {
width: 400px;
}
.item1 {
background-color: #f00;
}
.item2 {
background-color: #0f0;
}
.item3 {
background-color: #00f;
}
第 6 行
flex-wrap: wrap;
多了 flex-wrap: wrap; ，表示 item 會自動換行。
第 9 行
.item {
width: 400px;
}
若將每個 item 設定為 400px ，三個 item 總和為 1200px ，大於 container 的 960px ，但因為 flex-wrap: wrap ，第 3 個 item 將換行顯示，不再局限於 container 的 960px 。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
