内容简介：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。
Left Alignment
style.css
.box {
display: flex;
justify-content: flex-start;
width: 960px;
height: 240px;
margin: auto;
background-color: #d3d3d3;
}
.item {
width: 300px;
}
.item1 {
background-color: #faa;
}
.item2 {
background-color: #afa;
}
.item3 {
background-color: #aff;
}
第 １行
.box {
display: flex;
justify-content: flex-start;
}
display 為 flex ，表示使用 flexbox。
若沒特別指定 flex-direction ，預設為 row ，表示內容為 由左至右 。
justify-content 為 flex-start ，因為 由左至右 ，相當於 靠左對齊 。
.box {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
flex-direction 為 row-reverse ，表示內容為 由右至左 。
justify-content 為 flex-end ，表示從尾部開始對齊，相當於 靠左對齊 。
因為 flex-direction 設定不同，所以前者內容為 由左至右 ，後者為 由右至左 ，但結果都是 靠左對齊 。
Right Alignment
.box {
display: flex;
justify-content: flex-end;
}
若沒特別指定 flex-direction ，預設為 row ，表示內容為 由左至右 。
justify-content 為 flex-end ，因為 由左至右 ，相當於 靠右對齊 。
.box {
display: flex;
flex-direction: row-reverse;
justify-content: flex-start;
}
flex-direction 為 row-reverse ，表示內容為 由右至左 。
justify-content 為 flex-start ，表示從頭部開始對齊，相當於 靠右對齊 。
因為 flex-direction 設定不同，所以前者內容為 由右至左 ，後者為 由左至右 ，但結果都是 靠右對齊 。
Horizontal Center Alignment
.box {
display: flex;
justify-content: center;
}
若沒特別指定 flex-direction ，預設為 row ，表示 由左至右 。
justify-content 為 center ，相當於 水平置中 。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Python算法教程
[挪威] Magnus Lie Hetland 赫特兰 / 凌杰、陆禹淳、顾俊 / 人民邮电出版社 / 2016-1-1 / 69.00元
本书用Python语言来讲解算法的分析和设计。本书主要关注经典的算法，但同时会为读者理解基本算法问题和解决问题打下很好的基础。全书共11章。分别介绍了树、图、计数问题、归纳递归、遍历、分解合并、贪心算法、复杂依赖、Dijkstra算法、匹配切割问题以及困难问题及其稀释等内容。本书在每一章结束的时候均有练习题和参考资料，这为读者的自我检查以及进一步学习提供了较多的便利。在全书的最后，给出了练习题的提......一起来看看 《Python算法教程》 这本书的介绍吧!
