内容简介：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 之垂直對齊》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
禅与摩托车维修艺术
(美)罗伯特·M.波西格 / 张国辰 / 重庆出版社 / 2011-9 / 36.00元
在一个炎热的夏天，父子两人和约翰夫妇骑摩托车从明尼苏达到加州，跨越美国大陆，旅行的过程与一个青年斐德洛研修科学技术与西方经典，寻求自我的解脱，以及探寻生命的意义的过程相互穿插。一路上父亲以一场哲学肖陶扩的形式，将见到的自然景色，野外露营的经历，夜晚旅店的谈话，机车修护技术等等日常生活与西方从苏格拉底以来的理性哲学的深入浅出的阐述与评论相结合，进行了对形而上学传统的主客体二元论的反思，以及对科学与艺......一起来看看 《禅与摩托车维修艺术》 这本书的介绍吧!
