2019-9-27 seo達人
對于同一個頁面布局，幾乎每個人的寫法都不一樣，有人喜歡Flex彈性盒子布局，有的人則喜歡Float浮動布局，有些人喜歡Margin負值布局，等等。從來就沒有一種統一的布局方案，現在大伙寫代碼也就放飛自我，只要能在規定的環境上跑起來，不會亂就行了。但是，身為腦癱正經前端，我們還是有必要分出在不同情況應使用的布局。
這一篇博客比起作為文章，不如作為工具書。當你對布局迷茫時，不妨打開看看。我們可以不求甚解，只需要先把所有布局掌握熟練。
文章目錄
CSS3 終極布局指南
正常布局（語義化布局）
正常布局，按照瀏覽器的內置CSS渲染
應用場景
帶來的問題
挫
不兼容
沒有自適應
解決方案
Float浮動布局
什么是浮動？
浮動元素的排列
浮動解決的布局問題
浮動帶來的問題
父元素高度坍縮
不希望浮動時清除浮動
總結
定位布局
定位的應用
static
relative
absolute
高度坍縮
對比float
總結
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 布局
參考
聲明
正常布局（語義化布局）
正常布局，按照瀏覽器的內置CSS渲染
大道至簡在遠古時代，CSS還有沒被發明，瀏覽器渲染HTML的時候，只是按照規定好的如標題、段落、表格等格式渲染。且不同的瀏覽器對于相同元素的渲染也是不同的，現在這項傳統藝能保留到了今天。
不過到了今天，正常布局也稍微被W3C重視了一下。在HTML5的規定中，新增加了不少語義化的元素。所謂語義化元素就是讓大家規定它就是來做這件事的。
新增加的語義化元素。
標簽名稱 作用
hearder header 標簽定義文檔的頁面組合，通常是一些引導和導航信息。
nav nav 標簽定義顯示導航鏈接不是所有的成組的超級鏈接都需要放在nav標簽里。nav標簽里應該放入一些當前頁面的主要導航鏈接。 例如在頁腳顯示一個站點的導航鏈接（如首頁，服務信息頁面，版權信息頁面等等），就可以使用nav標簽，當然，這不是必須的。
article article標簽裝載顯示一個獨立的文章內容。例如一篇完整的論壇帖子，一則網站新聞，一篇博客文章等等，一個用戶評論等等 artilce可以嵌套，則內層的artilce對外層的article標簽有隸屬的關系。例如，一個博客文章，可以用article顯示，然后一 些評論可以以article的形式嵌入其中。
section section 標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。
aside aside 用來裝載非正文類的內容。例如廣告，成組的鏈接，側邊欄等等。
hgroup hgroup 標簽用于對網頁或區段的標題元素（h1-h6）進行組合。例如，在一個區段中你有連續的h系列的標簽元素，則可以用hgroup將他們括起來。
time time 標簽定義公歷的時間（24 小時制）或日期，時間和時區偏移是可選的。該元素能夠以機器可讀的方式對日期和時間進行編碼，這樣， 舉例說，用戶代理能夠把生日提醒或排定的事件添加到用戶日程表中，搜索引擎也能夠生成更智能的搜索結果。
mark mark 標簽定義帶有記號的文本。請在需要突出顯示文本時使用 <mark> 標簽。
figure figure標簽規定獨立的流內容（圖像、圖表、照片、代碼等等）。figure 元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響。
可以看到HTML5規定中增加了不少新的標簽，但是這些標簽大部分并不是為了補充正常的文檔布局的，而是服務于搜索引擎的爬蟲。不要覺得頁面布局只是給人看的！對于布局清晰地頁面，搜索引擎的爬蟲也會給出更高的分數。
應用場景
作為布局的基石。
開發較為單一的頁面，比如電子書閱讀頁面，面向視力障礙人士的報紙頁面等。
帶來的問題
挫
使用瀏覽器默認的CSS意味著你不可定制自己的頁面，對于像<ul>、<table>這樣的標簽，你也只能忍受上世紀的設計風格了。
不兼容
先前說了，每個瀏覽器對于基礎的HTML節點的渲染都不一樣，也就是說你寫的頁面在IE上是一個風格，換到Safari上又是一種風格。
沒有自適應
有一說一，正常布局（語義化）還是用來當基石比較好，對于響應式、自適應那還得看下面伙計的發揮。
解決方案
解決挫的方法就是使用style屬性，也就是使用CSS美化我們的頁面。解決不兼容的問題則需要初始化CSS，大伙應該在不少的頁面的頭部見過一大坨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
頁面初始化也是很重要的，它可以使我們的代碼健壯的運行在各個環境的瀏覽器上。
Float浮動布局
什么是浮動？
如果首先要認識一個物品，認識一個東西的最好方式是了解為什么會產生它，也就是要翻它的歷史。——NaoTan·Ma·Nong
看上圖，啊，報社最愛的環繞，一堆文字環繞一張圖片，這樣的布局使得頁面緊湊，并且有較好的閱讀體驗。如果我們要在HTML中實現這樣的布局應當怎么設置呢？手動設置換行？不行，缺少靈魂。如果能使文字繞過圖片排列下來就好了。
于是Float屬性出世，它不僅解決了文字環繞問題，并且帶來了新的布局方案。
如上面的布局，我們用代碼實現主要部分。
.side-bar{
float:left;
}
.main-content{
float:left;
}
1
2
3
4
5
6
浮動元素的排列
當一個元素被設置為浮動元素時，首先，它會被移除文檔流，設置float:left|right則元素會向設置方向排列，直到遇到父元素邊框(或者說最大寬度)或者另一個浮動元素時停止。
當設置父元素display:flex時，子元素的浮動值無效！
浮動解決的布局問題
使用浮動我們可以解決傳統的兩列布局、三列布局的自適應。下面代碼是用浮動實現的兩列布局。
<!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
效果如下
浮動帶來的問題
父元素高度坍縮
一般來說新手在學習浮動布局之后，遇到的第一個問題就是父元素高度坍縮。什么是高度坍縮？
看上圖，在父元素的四個子元素均為浮動元素，由于浮動元素的特性浮動元素脫離文檔流，所以父元素不會被撐起高度。
如何解決？答案很簡單，使用BFC塊級格式上下文。當父元素為BFC的時候，內部計算高度會帶上浮動元素的高度。
不希望浮動時清除浮動
使用clear屬性可以使元素清除周圍的浮動。
如上圖，對段落文字清除浮動，導致原本環繞的文字，另起一行。順便解決了高度坍縮的問題。
總結
浮動在帶來方便的同時也引入了新的問題，如果能處理好這些問題那么浮動也可以當做布局的主力，但是都已經9102年了，我們應該追隨CSS3的布局方案，盡量少使用浮動。
定位布局
收拾房子的時候總會把物品按照相應的位置放置，這樣會讓房間看上去更加整潔。所以，我們CSS也是可以這樣做的。
使用position屬性，調整元素的位置。position一共有四種定位類型：定位元素、相對定位、絕對定位、粘性定位，五種取值：static、relative、absolute、fixed、sticky。
名稱 描述 定位類型
static 該關鍵字指定元素使用正常的布局行為，即元素在文檔常規流中當前的布局位置。此時 top, right, bottom, left 和 z-index屬性無效。 定位元素
relative 該關鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面布局的前提下調整元素位置（因此會在此元素未添加定位時所在位置留下空白）。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素無效。 相對定位
absolute 不為元素預留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設置外邊距（margins），且不會與其他邊距合并。 絕對定位
fixed 不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現在的每頁的固定位置。fixed 屬性會創建新的層疊上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。 絕對定位
sticky 盒位置根據正常流計算(這稱為正常流動中的位置)，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在所有情況下（即便被定位元素為 table 時），該元素定位均不對后續元素造成影響。當元素 B 被粘性定位時，后續元素的位置仍按照 B 未定位時的位置來確定。position: sticky對 table 元素的效果與 position: relative相同。 粘性定位
一般使用position屬性時，會使用其相對定位與絕對定位、粘性定位，它們都使用top、bottom、left、right來調整自身位置，但是調整的基準不一樣。
定位的應用
static
static是元素正常出現在文檔流中的定位，文檔流中的排列為自上而下，自左至右。一般來說block元素自占一行，inline元素橫向排列。
正常情況下在我們的頁面中大部分元素為static定位，對于一些特殊需求我們需要使用其他定位。比如像wiki中的關鍵詞，鼠標移動上去的時候，關鍵詞下面顯示式卡片。
relative
relative是在實現一些特殊布局的時候經常使用的一種定位方式。設置為relative的元素并不會脫離文檔流，但是可以通過top、bottom、left、right調整元素對于默認基準的位置。
.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
使用相對定位可以實現一些炫酷的效果。
.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>鼠標移到我身上！</span>
<div class="card">
</div>
</div>
1
2
3
4
5
6
效果
但是，使用相對定位依然會出現一些問題。relative定位并不會脫離文檔流，所以.content元素的高度為200px。
absolute
與relative定位不同的是absolute是脫離文檔流的，而且相對基準是position屬性不為static的祖先元素，如果祖先都是static則元素相對body定位。并且，對于absolute元素，如果不設置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
上面的代碼很有意思，有興趣的同學可以放在codepen上面跑一下子。這個例子驗證了absolute的排列方式。當我們知道我們在做什的時候，也就不需要墨守成規（對于absolute元素的父元素統一設置relative屬性）了。
高度坍縮
只要是脫離了文檔流的元素都會出現高度坍縮，所以在使用absolute屬性時，請確保父元素不會因此而改變。
對比float
Float與absolute都會使元素脫離文檔流，但是眾所周知對相同元素設置float與設置absolute會出現不同的效果。這是因為float與absolute本身的排列不一樣。
float：脫離文檔流，排列時以父元素為基準，并且會為占用其他浮動元素的位置。
absolute：脫離文檔流，排列時分情況：第一種情況，對于未設置left、right、top、bottom屬性的元素，排列在正常顯示位置，并不占用空間。第二種情況，設置位置屬性的元素，基于非static祖先元素排列。
上面兩者比較顯著的差異為float會影響下一個float元素，但是absolute元素不會。
總結
說absolute為絕對定位也并不貼切，它也是基于祖先元素定位的，只是脫離了文檔流。我個人還是比較推薦在處理元素相對位置問題上使用absolute屬性的，但前提是您已經深刻理解了absolute的排列方式。
fixed
不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現在的每頁的固定位置。fixed 屬性會創建新的層疊上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。
fixed元素也會脫離文檔流，并且和absolute元素一樣，當不設置任何left、top、bottom、right值的時候，元素依然按照正常定位的位置放置。
祖先未使用transform:none
當祖先元素未使用transform:none的時候，fixed元素相對于該祖先元素進行定位。
在上面的圖片中，我設置小黃塊為fiexd屬性，并讓父元素設置為 使用transform:matrix(1, 0, 0, 1, 0, 0);，這時候小黃塊并沒有相對于body進行定位，當滾動條下拉時，小黃塊定位固定在父元素左上角。
使用
fiexd元素一般用在如：to-top按鈕，或者側邊懸浮面板，或者懸浮導航欄之中。
sticky 粘性定位
盒位置根據正常流計算(這稱為正常流動中的位置)，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在所有情況下（即便被定位元素為 table 時），該元素定位均不對后續元素造成影響。當元素 B 被粘性定位時，后續元素的位置仍按照 B 未定位時的位置來確定。position: sticky對 table 元素的效果與 position: relative相同。
上面我們使用了fiexd與transform，發生了我們意想不到的效果，那就是fixed元素并未相對于body進行移動，也沒有在父元素中進行標準的fixed定位。現在我們使用以下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>下面這個小黃塊設置為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
當我們向下滾動的時候神奇的事情發生了。
小黃塊固定到了父元素的top:0位置了，不僅如此，再向上滑動后，小黃塊又回復了當時的位置，而且占用了文檔本身的位置。
使用這個特性我們可以制作浮動的Header組件，當用戶向下滑動至窗口上側的時候，Header組件也跟隨窗口滑動。
Flex布局
對于前端工程師來說，最讓人頭疼的莫過于自適應布局。對于不同分辨率的設備要做到頁面統一，在CSS3出現之前，還是挺不容易的。還有就是前端工程師頭疼的一個布局問題：垂直居中。
CSS3中新出了一種布局技術：CSS彈性盒子布局，我們來看一下MDN是如何介紹的。
CSS 彈性盒子布局是 CSS 的模塊之一，定義了一種針對用戶界面設計而優化的 CSS 盒子模型。在彈性布局模型中，彈性容器的子元素可以在任何方向上排布，也可以“彈性伸縮”其尺寸，既可以增加尺寸以填滿未使用的空間，也可以收縮尺寸以避免父元素溢出。子元素的水平對齊和垂直對齊都能很方便的進行操控。通過嵌套這些框（水平框在垂直框內，或垂直框在水平框內）可以在兩個維度上構建布局。
接下來，我會使用Flex布局技術，設計一些我們常使用頁面布局，并指出優點與缺點。但是，我們首先要來看一下瀏覽器的支持程度。
瀏覽器支持
特性 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基礎支持 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務必清楚一些屬性概念。
Flex容器：對于一個基本元素(不含任何CSS屬性，如div)，設置display:flex，即可創建一個Flex容器。
Flex子項：父元素為Flex容器的元素，稱之為Flex子項，其排布受到父元素影響。注：一定是父元素為Flex容器的元素，祖先不算。
排布方向：指Flex子項在Flex容器中的排布方向。排布方向有兩種：column、row。在Flex容器上使用flex-direction: column|row(默認);即可設置。
主軸：指的Flex容器中是與排列方式相同的方向的軸。如設置Flex容器direction: column;則其主軸為豎直方向。
交叉軸：指的Flex容器中是與排列方式相反的方向的軸。如設置Flex容器direction: column;則其主軸為水平方向。
我們一定要清楚上面的基礎概念，這對深入使用Flex有很大的幫助。下面我會介紹一些Flex常用的屬性，主要分為兩部分：對Flex容器、對Flex子項。
Flex容器屬性
flex-direction 排布方向
flex-direction 屬性指定了內部元素是如何在 flex 容器中布局的，定義了主軸的方向(正方向或反方向)。
flex-direction屬性接受以下值：
row:子項目在flex容器中橫向，從左至右排列。
row-reverse:表現和row相同，也是橫向，但是是從右到左。
column:子項在容器中豎向排列，從上至下。
這里不貼圖了
column-reverse:表現和column相同，子項在容器中豎向排列，從下至上。
這里不貼圖了
flex-wrap 控制換行
CSS flex-wrap 指定 flex 元素單行顯示還是多行顯示 。如果允許換行，這個屬性允許你控制行的堆疊方向。
取值:
nowrap(默認)
flex 的元素被擺放到到一行，這可能導致溢出 flex 容器。 cross-start 會根據 flex-direction 的值 相當于 start 或 before。
wrap
flex 元素 被打斷到多個行中。cross-start 會根據 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
從行首開始排列。每行第一個元素與行首對齊，同時所有后續的元素與前一個對齊。
flex-start（默認）
從行首開始排列。每行第一個彈性元素與行首對齊，同時所有后續的彈性元素與前一個對齊。
flex-end
從行尾開始排列。每行最后一個彈性元素與行尾對齊，其他元素將與后一個對齊。
center
伸縮元素向每行中點排列。每行第一個元素到行首的距離將與每行最后一個元素到行尾的距離相同。
left
伸縮元素一個挨一個在對齊容器得左邊緣，如果屬性的軸與內聯軸不平行，則left的行為類似于start
right
元素以容器右邊緣為基準, 一個挨著一個對齊,如果屬性軸與內聯軸不平行,則right的行為類似于start.
space-between
在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。
space-around
在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最后一個元素到行尾的距離將會是相鄰元素之間距離的一半。
space-evenly
flex項都沿著主軸均勻分布在指定的對齊容器中。相鄰flex項之間的間距，主軸起始位置到第一個flex項的間距,主軸結束位置到最后一個flex項的間距，都完全一樣。
看上去與space-around的排布很相似，但其實還是有一些區別的。space-evenly會在每一行均勻分布間隙，而space-around是均勻分布項目。
借一張圖
看上去我們要學的屬性很多，但是其實我們只需要記住我們常用的幾個屬性就行:flex-start、flex-end、space-between、center、space-around、space-evenly。以上這幾個就是我們常用的屬性值，通過設置主軸方向、設置排列方式，我們可以靈活地組織我們的元素。
align-items 子項目在交叉軸排布
CSS align-items屬性將所有直接子節點上的align-self值設置為一個組。 align-self屬性設置項目在其包含塊中在交叉軸方向上的對齊方式。
取值：
normal
這個關鍵字的效果取決于我們處在什么布局模式中：在絕對定位的布局中，對于被替代的絕對定位盒子，這個效果和start的效果的一樣；對于其他所有絕對定位的盒子，這個效果和stretch的效果一樣。 在絕對定位布局的靜態位置上，效果和stretch一樣。對于那些彈性項目而言，效果和stretch一樣。對于那些網格項目而言，效果和stretch一樣，除了有部分比例或者一個固定大小的盒子的效果像start。這個屬性不適用于會計盒子和表格。
flex-start
元素向側軸起點對齊。
flex-end
元素向側軸終點對齊。
center
元素在側軸居中。如果元素在側軸上的高度高于其容器，那么在兩個方向上溢出距離相同。
因為align-items其實和justify-content我這里就不放一些圖片湊字數了。
align-content 定義多根軸線排布
該屬性對單行彈性盒子模型無效。（即：帶有flex-wrap: nowrap）。
CSS的align-content屬性設置了瀏覽器如何沿著伸縮盒子容器（flexbox container）的縱軸和網格容器（Grid Container）的主軸在內容項之間和周圍分配空間。
它的取值和align-items差不多，經常有人會把他們搞混。
align-content一般定義多行的交叉軸排列。
絕大多數情況下我們使用align-items即可實現我們的需求。
Flex子項屬性
order 子項排布靠前排名
CSS order 屬性規定了彈性容器中的可伸縮項目在布局時的順序。元素按照 order 屬性的值的增序進行布局。擁有相同 order 屬性值的元素按照它們在源代碼中出現的順序進行布局。
取值：
<integer>
表示此可伸縮項目所在的次序組。
flex-grow 子項放大比例
CSS flex-grow 屬性定義彈性盒子項（flex item）的拉伸因子
取值：
<number>
默認值0，即如果存在剩余空間，也不放大。負值無效。
flex-shrink 子項縮小比例
CSS flex-shrink 屬性指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大于容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值。
總而言之，你定了這個屬性，其他項目會先壓榨你的空間，然后再均勻縮小其他項目。
flex-basis
flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
注：分配多余空間之前！！
也就是說你給的flex-basis值大于當前分配空間時，依然會被壓縮。
flex
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
align-self
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
這個屬性了不得，它也是我們經常用的子項目屬性之一。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
1
2
3
就像上面的圖，他可以決定子項目的交叉軸單獨排列方式。
Grid 布局
未完待續…明天補上
參考
HTML5語義化標簽屬性-HTML5屬性手冊
All About Floats | CSS-Tricks
清除浮動的四種方式及其原理理解
【前端Talkking】CSS系列——CSS深入理解之absolute定位
CSS 彈性盒子布局
Flex 布局教程：語法篇
藍藍設計( www.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。