内容简介：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 ，相當於 水平置中 。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
新内容创业：我这样打造爆款IP
南立新、曲琳 / 机械工业出版社 / 2016-5-10 / 39.00
这是个内容创业爆棚的时代，在采访几十家内容创业公司，与一线最优秀的创业者独家对话之后，作者写作了这本书，其中包括对这个行业的真诚感触，以及希望沉淀下来的体系化思考。 本书共分三个部分讲述了爆红大号的内容创业模式和方法。其中第一部分，讲述了新的生产方式，即内容形态发展的现状--正在被塑造；第二部分，讲述了新的盈利探索，即从贩卖产品到贩卖内容的转变，该部分以多个案例进行佐证，内容翔实；第三部分，......一起来看看 《新内容创业：我这样打造爆款IP》 这本书的介绍吧!
