2019-9-27 seo達人
對于同一個頁面布局，幾乎每個人的寫法都不一樣，有人喜歡Flex彈性盒子布局，有的人則喜歡Float浮動布局，有些人喜歡Margin負(fù)值布局，等等。從來就沒有一種統(tǒng)一的布局方案，現(xiàn)在大伙寫代碼也就放飛自我，只要能在規(guī)定的環(huán)境上跑起來，不會亂就行了。但是，身為腦癱正經(jīng)前端，我們還是有必要分出在不同情況應(yīng)使用的布局。
這一篇博客比起作為文章，不如作為工具書。當(dāng)你對布局迷茫時，不妨打開看看。我們可以不求甚解，只需要先把所有布局掌握熟練。
文章目錄
CSS3 終極布局指南
正常布局（語義化布局）
正常布局，按照瀏覽器的內(nèi)置CSS渲染
應(yīng)用場景
帶來的問題
挫
不兼容
沒有自適應(yīng)
解決方案
Float浮動布局
什么是浮動？
浮動元素的排列
浮動解決的布局問題
浮動帶來的問題
父元素高度坍縮
不希望浮動時清除浮動
總結(jié)
定位布局
定位的應(yīng)用
static
relative
absolute
高度坍縮
對比float
總結(jié)
fixed
祖先未使用transform:none
使用
sticky 粘性定位
Flex布局
瀏覽器支持
Flex使用介紹
Flex容器屬性
flex-direction 排布方向
flex-wrap 控制換行
flex-flow [排布方向/控制換行]的簡稱
justify-content 子項目在主軸上的排布
align-items 子項目在交叉軸排布
align-content 定義多根軸線排布
Flex子項屬性
order 子項排布靠前排名
flex-grow 子項放大比例
flex-shrink 子項縮小比例
flex-basis
flex
align-self
Grid 布局
參考
聲明
正常布局（語義化布局）
正常布局，按照瀏覽器的內(nèi)置CSS渲染
大道至簡在遠(yuǎn)古時代，CSS還有沒被發(fā)明，瀏覽器渲染HTML的時候，只是按照規(guī)定好的如標(biāo)題、段落、表格等格式渲染。且不同的瀏覽器對于相同元素的渲染也是不同的，現(xiàn)在這項傳統(tǒng)藝能保留到了今天。
不過到了今天，正常布局也稍微被W3C重視了一下。在HTML5的規(guī)定中，新增加了不少語義化的元素。所謂語義化元素就是讓大家規(guī)定它就是來做這件事的。
新增加的語義化元素。
標(biāo)簽名稱 作用
hearder header 標(biāo)簽定義文檔的頁面組合，通常是一些引導(dǎo)和導(dǎo)航信息。
nav nav 標(biāo)簽定義顯示導(dǎo)航鏈接不是所有的成組的超級鏈接都需要放在nav標(biāo)簽里。nav標(biāo)簽里應(yīng)該放入一些當(dāng)前頁面的主要導(dǎo)航鏈接。 例如在頁腳顯示一個站點的導(dǎo)航鏈接（如首頁，服務(wù)信息頁面，版權(quán)信息頁面等等），就可以使用nav標(biāo)簽，當(dāng)然，這不是必須的。
article article標(biāo)簽裝載顯示一個獨立的文章內(nèi)容。例如一篇完整的論壇帖子，一則網(wǎng)站新聞，一篇博客文章等等，一個用戶評論等等 artilce可以嵌套，則內(nèi)層的artilce對外層的article標(biāo)簽有隸屬的關(guān)系。例如，一個博客文章，可以用article顯示，然后一 些評論可以以article的形式嵌入其中。
section section 標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。
aside aside 用來裝載非正文類的內(nèi)容。例如廣告，成組的鏈接，側(cè)邊欄等等。
hgroup hgroup 標(biāo)簽用于對網(wǎng)頁或區(qū)段的標(biāo)題元素（h1-h6）進行組合。例如，在一個區(qū)段中你有連續(xù)的h系列的標(biāo)簽元素，則可以用hgroup將他們括起來。
time time 標(biāo)簽定義公歷的時間（24 小時制）或日期，時間和時區(qū)偏移是可選的。該元素能夠以機器可讀的方式對日期和時間進行編碼，這樣， 舉例說，用戶代理能夠把生日提醒或排定的事件添加到用戶日程表中，搜索引擎也能夠生成更智能的搜索結(jié)果。
mark mark 標(biāo)簽定義帶有記號的文本。請在需要突出顯示文本時使用 <mark> 標(biāo)簽。
figure figure標(biāo)簽規(guī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等等）。figure 元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，則不應(yīng)對文檔流產(chǎn)生影響。
可以看到HTML5規(guī)定中增加了不少新的標(biāo)簽，但是這些標(biāo)簽大部分并不是為了補充正常的文檔布局的，而是服務(wù)于搜索引擎的爬蟲。不要覺得頁面布局只是給人看的！對于布局清晰地頁面，搜索引擎的爬蟲也會給出更高的分?jǐn)?shù)。
應(yīng)用場景
作為布局的基石。
開發(fā)較為單一的頁面，比如電子書閱讀頁面，面向視力障礙人士的報紙頁面等。
帶來的問題
挫
使用瀏覽器默認(rèn)的CSS意味著你不可定制自己的頁面，對于像<ul>、<table>這樣的標(biāo)簽，你也只能忍受上世紀(jì)的設(shè)計風(fēng)格了。
不兼容
先前說了，每個瀏覽器對于基礎(chǔ)的HTML節(jié)點的渲染都不一樣，也就是說你寫的頁面在IE上是一個風(fēng)格，換到Safari上又是一種風(fēng)格。
沒有自適應(yīng)
有一說一，正常布局（語義化）還是用來當(dāng)基石比較好，對于響應(yīng)式、自適應(yīng)那還得看下面伙計的發(fā)揮。
解決方案
解決挫的方法就是使用style屬性，也就是使用CSS美化我們的頁面。解決不兼容的問題則需要初始化CSS，大伙應(yīng)該在不少的頁面的頭部見過一大坨css代碼吧，就像下面Google頁面。(部分)
body{color:#000;margin:0}body{background:#fff}a.gb1,a.gb2,a.gb3,.link{color:#1a0dab !important}.ts{border-collapse:collapse}.ts td{padding:0}#res,#res .j{line-height:1.2}.g{line-height:1.2;text-align:left;}.ti,.bl{display:inline}.ti{display:inline-table}#rhs_block{padding-bottom:15px}a:link,.w,#prs a:visited,#prs a:active,.q:active,.q:visited,.kl:active,.tbotu{color:#1a0dab}.mblink:visited,a:visited{color:#609}.cur,.b{font-weight:bold}.j{width:42em;font-size:82%}.s{max-width:48em}.sl{font-size:82%}
1
頁面初始化也是很重要的，它可以使我們的代碼健壯的運行在各個環(huán)境的瀏覽器上。
Float浮動布局
什么是浮動？
如果首先要認(rèn)識一個物品，認(rèn)識一個東西的最好方式是了解為什么會產(chǎn)生它，也就是要翻它的歷史。——NaoTan·Ma·Nong
看上圖，啊，報社最愛的環(huán)繞，一堆文字環(huán)繞一張圖片，這樣的布局使得頁面緊湊，并且有較好的閱讀體驗。如果我們要在HTML中實現(xiàn)這樣的布局應(yīng)當(dāng)怎么設(shè)置呢？手動設(shè)置換行？不行，缺少靈魂。如果能使文字繞過圖片排列下來就好了。
于是Float屬性出世，它不僅解決了文字環(huán)繞問題，并且?guī)砹诵碌牟季址桨浮?br />
如上面的布局，我們用代碼實現(xiàn)主要部分。
.side-bar{
float:left;
}
.main-content{
float:left;
}
1
2
3
4
5
6
浮動元素的排列
當(dāng)一個元素被設(shè)置為浮動元素時，首先，它會被移除文檔流，設(shè)置float:left|right則元素會向設(shè)置方向排列，直到遇到父元素邊框(或者說最大寬度)或者另一個浮動元素時停止。
當(dāng)設(shè)置父元素display:flex時，子元素的浮動值無效！
浮動解決的布局問題
使用浮動我們可以解決傳統(tǒng)的兩列布局、三列布局的自適應(yīng)。下面代碼是用浮動實現(xiàn)的兩列布局。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>兩列布局</title>
<style>
body,
html {
margin: 0;
background-color: rgb(228, 228, 228);
}
header {
margin-bottom: 20px;
}
footer {
margin-top: 20px;
}
.layout {
height: 50px;
border: 1px solid black;
}
aside {
width: 25%;
float: left;
border: solid 1px black;
height: 500px;
}
article {
width: 70%;
border: solid 1px black;
height: 500px;
float: right;
}
</style>
</head>
<body>
<header class="layout"></header>
<div style="overflow:auto;">
<aside>
</aside>
<article>
</article>
</div>
<footer class="layout"></footer>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
效果如下
浮動帶來的問題
父元素高度坍縮
一般來說新手在學(xué)習(xí)浮動布局之后，遇到的第一個問題就是父元素高度坍縮。什么是高度坍縮？
看上圖，在父元素的四個子元素均為浮動元素，由于浮動元素的特性浮動元素脫離文檔流，所以父元素不會被撐起高度。
如何解決？答案很簡單，使用BFC塊級格式上下文。當(dāng)父元素為BFC的時候，內(nèi)部計算高度會帶上浮動元素的高度。
不希望浮動時清除浮動
使用clear屬性可以使元素清除周圍的浮動。
如上圖，對段落文字清除浮動，導(dǎo)致原本環(huán)繞的文字，另起一行。順便解決了高度坍縮的問題。
總結(jié)
浮動在帶來方便的同時也引入了新的問題，如果能處理好這些問題那么浮動也可以當(dāng)做布局的主力，但是都已經(jīng)9102年了，我們應(yīng)該追隨CSS3的布局方案，盡量少使用浮動。
定位布局
收拾房子的時候總會把物品按照相應(yīng)的位置放置，這樣會讓房間看上去更加整潔。所以，我們CSS也是可以這樣做的。
使用position屬性，調(diào)整元素的位置。position一共有四種定位類型：定位元素、相對定位、絕對定位、粘性定位，五種取值：static、relative、absolute、fixed、sticky。
名稱 描述 定位類型
static 該關(guān)鍵字指定元素使用正常的布局行為，即元素在文檔常規(guī)流中當(dāng)前的布局位置。此時 top, right, bottom, left 和 z-index屬性無效。 定位元素
relative 該關(guān)鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面布局的前提下調(diào)整元素位置（因此會在此元素未添加定位時所在位置留下空白）。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素?zé)o效。 相對定位
absolute 不為元素預(yù)留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設(shè)置外邊距（margins），且不會與其他邊距合并。 絕對定位
fixed 不為元素預(yù)留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現(xiàn)在的每頁的固定位置。fixed 屬性會創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。 絕對定位
sticky 盒位置根據(jù)正常流計算(這稱為正常流動中的位置)，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在所有情況下（即便被定位元素為 table 時），該元素定位均不對后續(xù)元素造成影響。當(dāng)元素 B 被粘性定位時，后續(xù)元素的位置仍按照 B 未定位時的位置來確定。position: sticky對 table 元素的效果與 position: relative相同。 粘性定位
一般使用position屬性時，會使用其相對定位與絕對定位、粘性定位，它們都使用top、bottom、left、right來調(diào)整自身位置，但是調(diào)整的基準(zhǔn)不一樣。
定位的應(yīng)用
static
static是元素正常出現(xiàn)在文檔流中的定位，文檔流中的排列為自上而下，自左至右。一般來說block元素自占一行，inline元素橫向排列。
正常情況下在我們的頁面中大部分元素為static定位，對于一些特殊需求我們需要使用其他定位。比如像wiki中的關(guān)鍵詞，鼠標(biāo)移動上去的時候，關(guān)鍵詞下面顯示式卡片。
relative
relative是在實現(xiàn)一些特殊布局的時候經(jīng)常使用的一種定位方式。設(shè)置為relative的元素并不會脫離文檔流，但是可以通過top、bottom、left、right調(diào)整元素對于默認(rèn)基準(zhǔn)的位置。
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
position: relative;
top: 20px;
left: 20px;
background: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
使用相對定位可以實現(xiàn)一些炫酷的效果。
.content{
text-align: center;
margin: 20px;
}
.card{
position: relative;
display: inline-block;
width: 200px;
height: 200px;
background-color: darkgray;
top: 210px;
right: 170px;
visibility: hidden;
}
span:hover+.card{
visibility:visible;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="content">
<span>鼠標(biāo)移到我身上！</span>
<div class="card">
</div>
</div>
1
2
3
4
5
6
效果
但是，使用相對定位依然會出現(xiàn)一些問題。relative定位并不會脫離文檔流，所以.content元素的高度為200px。
absolute
與relative定位不同的是absolute是脫離文檔流的，而且相對基準(zhǔn)是position屬性不為static的祖先元素，如果祖先都是static則元素相對body定位。并且，對于absolute元素，如果不設(shè)置top/bottom/left/right的話依然排列在正常布局位置。
html,
body {
margin: 0;
}
.content {
position: relative;
/ top: 50px; /
margin-top: 50px;
}
.static {
position: static;
}
.relative {
position: relative;
margin: 20px 0;
}
.absolute {
display: inline-block;
width: 50px;
height: 50px;
background-color: lightcoral;
position: absolute;
}
.non-ab {
display: inline-block;
width: 50px;
height: 50px;
background-color: darkblue;
margin-left: 100px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="content">
<div style="height: 50px;"></div>
<div class="static">
<div class="non-ab">
</div>
<div class="absolute">
</div>
</div>
<div class="relative">
<div class="absolute">
</div>
<div class="non-ab">
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
上面的代碼很有意思，有興趣的同學(xué)可以放在codepen上面跑一下子。這個例子驗證了absolute的排列方式。當(dāng)我們知道我們在做什的時候，也就不需要墨守成規(guī)（對于absolute元素的父元素統(tǒng)一設(shè)置relative屬性）了。
高度坍縮
只要是脫離了文檔流的元素都會出現(xiàn)高度坍縮，所以在使用absolute屬性時，請確保父元素不會因此而改變。
對比float
Float與absolute都會使元素脫離文檔流，但是眾所周知對相同元素設(shè)置float與設(shè)置absolute會出現(xiàn)不同的效果。這是因為float與absolute本身的排列不一樣。
float：脫離文檔流，排列時以父元素為基準(zhǔn)，并且會為占用其他浮動元素的位置。
absolute：脫離文檔流，排列時分情況：第一種情況，對于未設(shè)置left、right、top、bottom屬性的元素，排列在正常顯示位置，并不占用空間。第二種情況，設(shè)置位置屬性的元素，基于非static祖先元素排列。
上面兩者比較顯著的差異為float會影響下一個float元素，但是absolute元素不會。
總結(jié)
說absolute為絕對定位也并不貼切，它也是基于祖先元素定位的，只是脫離了文檔流。我個人還是比較推薦在處理元素相對位置問題上使用absolute屬性的，但前提是您已經(jīng)深刻理解了absolute的排列方式。
fixed
不為元素預(yù)留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現(xiàn)在的每頁的固定位置。fixed 屬性會創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。
fixed元素也會脫離文檔流，并且和absolute元素一樣，當(dāng)不設(shè)置任何left、top、bottom、right值的時候，元素依然按照正常定位的位置放置。
祖先未使用transform:none
當(dāng)祖先元素未使用transform:none的時候，fixed元素相對于該祖先元素進行定位。
在上面的圖片中，我設(shè)置小黃塊為fiexd屬性，并讓父元素設(shè)置為 使用transform:matrix(1, 0, 0, 1, 0, 0);，這時候小黃塊并沒有相對于body進行定位，當(dāng)滾動條下拉時，小黃塊定位固定在父元素左上角。
使用
fiexd元素一般用在如：to-top按鈕，或者側(cè)邊懸浮面板，或者懸浮導(dǎo)航欄之中。
sticky 粘性定位
盒位置根據(jù)正常流計算(這稱為正常流動中的位置)，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在所有情況下（即便被定位元素為 table 時），該元素定位均不對后續(xù)元素造成影響。當(dāng)元素 B 被粘性定位時，后續(xù)元素的位置仍按照 B 未定位時的位置來確定。position: sticky對 table 元素的效果與 position: relative相同。
上面我們使用了fiexd與transform，發(fā)生了我們意想不到的效果，那就是fixed元素并未相對于body進行移動，也沒有在父元素中進行標(biāo)準(zhǔn)的fixed定位?，F(xiàn)在我們使用以下sticky屬性來看一下效果。
<style>
.box{
box-sizing: border-box;
height: 150px;
border:solid 3px black;
margin: 0 0 20px 0;
overflow: auto;
}
.block{
width: 50px;
height: 50px;
background-color: orange;
}
.sticky-1{
position:sticky;
top: 0px;
}
</style>
<div class="box box-1">
<p>下面這個小黃塊設(shè)置為sticky</p>
<div class="sticky-1 block">
</div>
<p>
hahah
</p>
<p>
hahah
</p>
<p>hahaha</p>
<p>hahaha</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
當(dāng)我們向下滾動的時候神奇的事情發(fā)生了。
小黃塊固定到了父元素的top:0位置了，不僅如此，再向上滑動后，小黃塊又回復(fù)了當(dāng)時的位置，而且占用了文檔本身的位置。
使用這個特性我們可以制作浮動的Header組件，當(dāng)用戶向下滑動至窗口上側(cè)的時候，Header組件也跟隨窗口滑動。
Flex布局
對于前端工程師來說，最讓人頭疼的莫過于自適應(yīng)布局。對于不同分辨率的設(shè)備要做到頁面統(tǒng)一，在CSS3出現(xiàn)之前，還是挺不容易的。還有就是前端工程師頭疼的一個布局問題：垂直居中。
CSS3中新出了一種布局技術(shù)：CSS彈性盒子布局，我們來看一下MDN是如何介紹的。
CSS 彈性盒子布局是 CSS 的模塊之一，定義了一種針對用戶界面設(shè)計而優(yōu)化的 CSS 盒子模型。在彈性布局模型中，彈性容器的子元素可以在任何方向上排布，也可以“彈性伸縮”其尺寸，既可以增加尺寸以填滿未使用的空間，也可以收縮尺寸以避免父元素溢出。子元素的水平對齊和垂直對齊都能很方便的進行操控。通過嵌套這些框（水平框在垂直框內(nèi)，或垂直框在水平框內(nèi)）可以在兩個維度上構(gòu)建布局。
接下來，我會使用Flex布局技術(shù)，設(shè)計一些我們常使用頁面布局，并指出優(yōu)點與缺點。但是，我們首先要來看一下瀏覽器的支持程度。
瀏覽器支持
特性 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基礎(chǔ)支持 20.0 (20.0) 21.0-webkit 29.0 10.0-ms 11.0 12.10 6.1-webkit
主流的瀏覽器全部支持Flex屬性。注：與社會脫軌的IE9并不支持Flex，如果想寫出兼容IE9的頁面，請不要使用Flex。
Flex使用介紹
使用flex務(wù)必清楚一些屬性概念。
Flex容器：對于一個基本元素(不含任何CSS屬性，如div)，設(shè)置display:flex，即可創(chuàng)建一個Flex容器。
Flex子項：父元素為Flex容器的元素，稱之為Flex子項，其排布受到父元素影響。注：一定是父元素為Flex容器的元素，祖先不算。
排布方向：指Flex子項在Flex容器中的排布方向。排布方向有兩種：column、row。在Flex容器上使用flex-direction: column|row(默認(rèn));即可設(shè)置。
主軸：指的Flex容器中是與排列方式相同的方向的軸。如設(shè)置Flex容器direction: column;則其主軸為豎直方向。
交叉軸：指的Flex容器中是與排列方式相反的方向的軸。如設(shè)置Flex容器direction: column;則其主軸為水平方向。
我們一定要清楚上面的基礎(chǔ)概念，這對深入使用Flex有很大的幫助。下面我會介紹一些Flex常用的屬性，主要分為兩部分：對Flex容器、對Flex子項。
Flex容器屬性
flex-direction 排布方向
flex-direction 屬性指定了內(nèi)部元素是如何在 flex 容器中布局的，定義了主軸的方向(正方向或反方向)。
flex-direction屬性接受以下值：
row:子項目在flex容器中橫向，從左至右排列。
row-reverse:表現(xiàn)和row相同，也是橫向，但是是從右到左。
column:子項在容器中豎向排列，從上至下。
這里不貼圖了
column-reverse:表現(xiàn)和column相同，子項在容器中豎向排列，從下至上。
這里不貼圖了
flex-wrap 控制換行
CSS flex-wrap 指定 flex 元素單行顯示還是多行顯示 。如果允許換行，這個屬性允許你控制行的堆疊方向。
取值:
nowrap(默認(rèn))
flex 的元素被擺放到到一行，這可能導(dǎo)致溢出 flex 容器。 cross-start 會根據(jù) flex-direction 的值 相當(dāng)于 start 或 before。
wrap
flex 元素 被打斷到多個行中。cross-start 會根據(jù) flex-direction 的值選擇等于start 或before。cross-end 為確定的 cross-start 的另一端。
wrap-reverse
和 wrap 的行為一樣，但是 cross-start 和 cross-end 互換。
flex-flow [排布方向/控制換行]的簡稱
CSS flex-flow 屬性是 flex-direction 和 flex-wrap 的簡寫。
示例：flex-flow: column-reverse wrap;
justify-content 子項目在主軸上的排布
CSS justify-content 屬性定義了瀏覽器如何分配順著父容器主軸的彈性元素之間及其周圍的空間。
justify-content同時受到父容器主軸的影響。
取值：
start
從行首開始排列。每行第一個元素與行首對齊，同時所有后續(xù)的元素與前一個對齊。
flex-start（默認(rèn)）
從行首開始排列。每行第一個彈性元素與行首對齊，同時所有后續(xù)的彈性元素與前一個對齊。
flex-end
從行尾開始排列。每行最后一個彈性元素與行尾對齊，其他元素將與后一個對齊。
center
伸縮元素向每行中點排列。每行第一個元素到行首的距離將與每行最后一個元素到行尾的距離相同。
left
伸縮元素一個挨一個在對齊容器得左邊緣，如果屬性的軸與內(nèi)聯(lián)軸不平行，則left的行為類似于start
right
元素以容器右邊緣為基準(zhǔn), 一個挨著一個對齊,如果屬性軸與內(nèi)聯(lián)軸不平行,則right的行為類似于start.
space-between
在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。
space-around
在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最后一個元素到行尾的距離將會是相鄰元素之間距離的一半。
space-evenly
flex項都沿著主軸均勻分布在指定的對齊容器中。相鄰flex項之間的間距，主軸起始位置到第一個flex項的間距,主軸結(jié)束位置到最后一個flex項的間距，都完全一樣。
看上去與space-around的排布很相似，但其實還是有一些區(qū)別的。space-evenly會在每一行均勻分布間隙，而space-around是均勻分布項目。
借一張圖
看上去我們要學(xué)的屬性很多，但是其實我們只需要記住我們常用的幾個屬性就行:flex-start、flex-end、space-between、center、space-around、space-evenly。以上這幾個就是我們常用的屬性值，通過設(shè)置主軸方向、設(shè)置排列方式，我們可以靈活地組織我們的元素。
align-items 子項目在交叉軸排布
CSS align-items屬性將所有直接子節(jié)點上的align-self值設(shè)置為一個組。 align-self屬性設(shè)置項目在其包含塊中在交叉軸方向上的對齊方式。
取值：
normal
這個關(guān)鍵字的效果取決于我們處在什么布局模式中：在絕對定位的布局中，對于被替代的絕對定位盒子，這個效果和start的效果的一樣；對于其他所有絕對定位的盒子，這個效果和stretch的效果一樣。 在絕對定位布局的靜態(tài)位置上，效果和stretch一樣。對于那些彈性項目而言，效果和stretch一樣。對于那些網(wǎng)格項目而言，效果和stretch一樣，除了有部分比例或者一個固定大小的盒子的效果像start。這個屬性不適用于會計盒子和表格。
flex-start
元素向側(cè)軸起點對齊。
flex-end
元素向側(cè)軸終點對齊。
center
元素在側(cè)軸居中。如果元素在側(cè)軸上的高度高于其容器，那么在兩個方向上溢出距離相同。
因為align-items其實和justify-content我這里就不放一些圖片湊字?jǐn)?shù)了。
align-content 定義多根軸線排布
該屬性對單行彈性盒子模型無效。（即：帶有flex-wrap: nowrap）。
CSS的align-content屬性設(shè)置了瀏覽器如何沿著伸縮盒子容器（flexbox container）的縱軸和網(wǎng)格容器（Grid Container）的主軸在內(nèi)容項之間和周圍分配空間。
它的取值和align-items差不多，經(jīng)常有人會把他們搞混。
align-content一般定義多行的交叉軸排列。
絕大多數(shù)情況下我們使用align-items即可實現(xiàn)我們的需求。
Flex子項屬性
order 子項排布靠前排名
CSS order 屬性規(guī)定了彈性容器中的可伸縮項目在布局時的順序。元素按照 order 屬性的值的增序進行布局。擁有相同 order 屬性值的元素按照它們在源代碼中出現(xiàn)的順序進行布局。
取值：
<integer>
表示此可伸縮項目所在的次序組。
flex-grow 子項放大比例
CSS flex-grow 屬性定義彈性盒子項（flex item）的拉伸因子
取值：
<number>
默認(rèn)值0，即如果存在剩余空間，也不放大。負(fù)值無效。
flex-shrink 子項縮小比例
CSS flex-shrink 屬性指定了 flex 元素的收縮規(guī)則。flex 元素僅在默認(rèn)寬度之和大于容器的時候才會發(fā)生收縮，其收縮的大小是依據(jù) flex-shrink 的值。
總而言之，你定了這個屬性，其他項目會先壓榨你的空間，然后再均勻縮小其他項目。
flex-basis
flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto，即項目的本來大小。
注：分配多余空間之前！！
也就是說你給的flex-basis值大于當(dāng)前分配空間時，依然會被壓縮。
flex
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個屬性可選。
align-self
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
這個屬性了不得，它也是我們經(jīng)常用的子項目屬性之一。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
1
2
3
就像上面的圖，他可以決定子項目的交叉軸單獨排列方式。
Grid 布局
未完待續(xù)…明天補上
參考
HTML5語義化標(biāo)簽屬性-HTML5屬性手冊
All About Floats | CSS-Tricks
清除浮動的四種方式及其原理理解
【前端Talkking】CSS系列——CSS深入理解之a(chǎn)bsolute定位
CSS 彈性盒子布局
Flex 布局教程：語法篇
藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍(lán)藍(lán)設(shè)計的小編 http://bouu.cn