内容简介：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 ，相當於 水平置中 。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- Java程序员怎样才能在两年内，技术水平达到月薪2w的水平呢！
- 水平分库如何做到平滑扩展
- Redis集群水平扩展（二）
- Redis集群水平扩展（一）
- Vuetify 之水平對齊
- html – 水平滚动的图像列表
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
设计原本
Frederick P. Brooks, Jr. / InfoQ中文站、王海鹏、高博 / 机械工业出版社 / 2011-1-1 / 55.00元
无论是软件开发、工程还是建筑，有效的设计都是工作的核心。《设计原本:计算机科学巨匠Frederick P. Brooks的思考》将对设计过程进行深入分析，揭示进行有效和优雅设计的方法。 本书包含了多个行业设计者的特别领悟。Frederick P. Brooks, Jr.精确发现了所有设计项目中内在的不变因素，揭示 了进行优秀设计的过程和模式。通过与几十位优秀设计者的对话，以及他自己在几个设计......一起来看看 《设计原本》 这本书的介绍吧!
