内容简介：Flexbox 對於macOS Mojave 10.14.5WebStorm 2019.1.3
Flexbox 對於 垂直對齊 ，並沒有專屬 Property 設定，而是由 row-direction 與 justify-content 決定。
Version
macOS Mojave 10.14.5
WebStorm 2019.1.3
Safari 12.1.1
CSS 3
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">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
</body>
</html>
對 3 個 <div> 做垂直 layout。
Top Alignment
style.css
.box {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 960px;
height: 400px;
margin: auto;
background-color: #d3d3d3;
}
.item {
width: 960px;
height: 120px;
}
.item1 {
background-color: #faa;
}
.item2 {
background-color: #afa;
}
.item3 {
background-color: #aff;
}
第 １行
.box {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
display 為 flex ，表示使用 flexbox。
flex-direction 為 column ，表示 由上至下 。
justify-content 為 flex-start ，因為 由上至下 ，相當於 靠上對齊 。
.box {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
}
flex-direction 為 column-reverse ，表示內容為 由下至上 。
justify-content 為 flex-end ，表示從尾部開始對齊，相當於 靠上對齊 。
因為 flex-direction 設定不同，所以前者內容為 由上至下 ，後者為 由下至上 ，但結果都是 靠上對齊 。
Bottom Alignment
.box {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
flex-direction 為 column ，表示內容為 由上至下 。
justify-content 為 flex-end ，表示從尾部開始對齊，相當於 靠下對齊 。
.box {
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
}
flex-direction 為 column-reverse ，表示內容為 由下至上 。
justify-content 為 flex-start ，表示從頭部開始對齊，相當於 靠下對齊 。
因為 flex-direction 設定不同，所以前者內容為 由上至下 ，後者為 由下至上 ，但結果都是 靠下對齊 。
Vertical Center Alignment
.box {
display: flex;
flex-direction: column;
justify-content: center;
}
flex-direction 為 column ，表示內容為 由上至下 。
justify-content 為 center ，相當於 垂直置中 。
以上所述就是小编给大家介绍的《CSS Flexbox 之垂直對齊》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
