對(duì)于同一個(gè)頁面布局，幾乎每個(gè)人的寫法都不一樣，有人喜歡Flex彈性盒子布局，有的人則喜歡Float浮動(dòng)布局，有些人喜歡Margin負(fù)值布局，等等。從來就沒有一種統(tǒng)一的布局方案，現(xiàn)在大伙寫代碼也就放飛自我，只要能在規(guī)定的環(huán)境上跑起來，不會(huì)亂就行了。但是，身為腦癱正經(jīng)前端，我們還是有必要分出在不同情況應(yīng)使用的布局。



這一篇博客比起作為文章，不如作為工具書。當(dāng)你對(duì)布局迷茫時(shí)，不妨打開看看。我們可以不求甚解，只需要先把所有布局掌握熟練。



文章目錄

CSS3 終極布局指南

正常布局（語義化布局）

正常布局，按照瀏覽器的內(nèi)置CSS渲染

應(yīng)用場(chǎng)景

帶來的問題

挫

不兼容

沒有自適應(yīng)

解決方案

Float浮動(dòng)布局

什么是浮動(dòng)？

浮動(dòng)元素的排列

浮動(dòng)解決的布局問題

浮動(dòng)帶來的問題

父元素高度坍縮

不希望浮動(dòng)時(shí)清除浮動(dòng)

總結(jié)

定位布局

定位的應(yīng)用

static

relative

absolute

高度坍縮

對(duì)比float

總結(jié)

fixed

祖先未使用transform:none

使用

sticky 粘性定位

Flex布局

瀏覽器支持

Flex使用介紹

Flex容器屬性

flex-direction 排布方向

flex-wrap 控制換行

flex-flow [排布方向/控制換行]的簡(jiǎn)稱

justify-content 子項(xiàng)目在主軸上的排布

align-items 子項(xiàng)目在交叉軸排布

align-content 定義多根軸線排布

Flex子項(xiàng)屬性

order 子項(xiàng)排布靠前排名

flex-grow 子項(xiàng)放大比例

flex-shrink 子項(xiàng)縮小比例

flex-basis

flex

align-self

Grid 布局

參考

聲明

正常布局（語義化布局）

正常布局，按照瀏覽器的內(nèi)置CSS渲染

大道至簡(jiǎn)在遠(yuǎn)古時(shí)代，CSS還有沒被發(fā)明，瀏覽器渲染HTML的時(shí)候，只是按照規(guī)定好的如標(biāo)題、段落、表格等格式渲染。且不同的瀏覽器對(duì)于相同元素的渲染也是不同的，現(xiàn)在這項(xiàng)傳統(tǒng)藝能保留到了今天。



不過到了今天，正常布局也稍微被W3C重視了一下。在HTML5的規(guī)定中，新增加了不少語義化的元素。所謂語義化元素就是讓大家規(guī)定它就是來做這件事的。



新增加的語義化元素。



標(biāo)簽名稱 作用

hearder header 標(biāo)簽定義文檔的頁面組合，通常是一些引導(dǎo)和導(dǎo)航信息。

nav nav 標(biāo)簽定義顯示導(dǎo)航鏈接不是所有的成組的超級(jí)鏈接都需要放在nav標(biāo)簽里。nav標(biāo)簽里應(yīng)該放入一些當(dāng)前頁面的主要導(dǎo)航鏈接。 例如在頁腳顯示一個(gè)站點(diǎn)的導(dǎo)航鏈接（如首頁，服務(wù)信息頁面，版權(quán)信息頁面等等），就可以使用nav標(biāo)簽，當(dāng)然，這不是必須的。

article article標(biāo)簽裝載顯示一個(gè)獨(dú)立的文章內(nèi)容。例如一篇完整的論壇帖子，一則網(wǎng)站新聞，一篇博客文章等等，一個(gè)用戶評(píng)論等等 artilce可以嵌套，則內(nèi)層的artilce對(duì)外層的article標(biāo)簽有隸屬的關(guān)系。例如，一個(gè)博客文章，可以用article顯示，然后一 些評(píng)論可以以article的形式嵌入其中。

section section 標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。

aside aside 用來裝載非正文類的內(nèi)容。例如廣告，成組的鏈接，側(cè)邊欄等等。

hgroup hgroup 標(biāo)簽用于對(duì)網(wǎng)頁或區(qū)段的標(biāo)題元素（h1-h6）進(jìn)行組合。例如，在一個(gè)區(qū)段中你有連續(xù)的h系列的標(biāo)簽元素，則可以用hgroup將他們括起來。

time time 標(biāo)簽定義公歷的時(shí)間（24 小時(shí)制）或日期，時(shí)間和時(shí)區(qū)偏移是可選的。該元素能夠以機(jī)器可讀的方式對(duì)日期和時(shí)間進(jìn)行編碼，這樣， 舉例說，用戶代理能夠把生日提醒或排定的事件添加到用戶日程表中，搜索引擎也能夠生成更智能的搜索結(jié)果。

mark mark 標(biāo)簽定義帶有記號(hào)的文本。請(qǐng)?jiān)谛枰怀鲲@示文本時(shí)使用 <mark> 標(biāo)簽。

figure figure標(biāo)簽規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。figure 元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，則不應(yīng)對(duì)文檔流產(chǎn)生影響。

可以看到HTML5規(guī)定中增加了不少新的標(biāo)簽，但是這些標(biāo)簽大部分并不是為了補(bǔ)充正常的文檔布局的，而是服務(wù)于搜索引擎的爬蟲。不要覺得頁面布局只是給人看的！對(duì)于布局清晰地頁面，搜索引擎的爬蟲也會(huì)給出更高的分?jǐn)?shù)。



應(yīng)用場(chǎng)景

作為布局的基石。

開發(fā)較為單一的頁面，比如電子書閱讀頁面，面向視力障礙人士的報(bào)紙頁面等。

帶來的問題

挫

使用瀏覽器默認(rèn)的CSS意味著你不可定制自己的頁面，對(duì)于像<ul>、<table>這樣的標(biāo)簽，你也只能忍受上世紀(jì)的設(shè)計(jì)風(fēng)格了。



不兼容

先前說了，每個(gè)瀏覽器對(duì)于基礎(chǔ)的HTML節(jié)點(diǎn)的渲染都不一樣，也就是說你寫的頁面在IE上是一個(gè)風(fēng)格，換到Safari上又是一種風(fēng)格。



沒有自適應(yīng)

有一說一，正常布局（語義化）還是用來當(dāng)基石比較好，對(duì)于響應(yīng)式、自適應(yīng)那還得看下面伙計(jì)的發(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

頁面初始化也是很重要的，它可以使我們的代碼健壯的運(yùn)行在各個(gè)環(huán)境的瀏覽器上。



Float浮動(dòng)布局

什么是浮動(dòng)？

如果首先要認(rèn)識(shí)一個(gè)物品，認(rèn)識(shí)一個(gè)東西的最好方式是了解為什么會(huì)產(chǎn)生它，也就是要翻它的歷史。——NaoTan·Ma·Nong





看上圖，啊，報(bào)社最愛的環(huán)繞，一堆文字環(huán)繞一張圖片，這樣的布局使得頁面緊湊，并且有較好的閱讀體驗(yàn)。如果我們要在HTML中實(shí)現(xiàn)這樣的布局應(yīng)當(dāng)怎么設(shè)置呢？手動(dòng)設(shè)置換行？不行，缺少靈魂。如果能使文字繞過圖片排列下來就好了。



于是Float屬性出世，它不僅解決了文字環(huán)繞問題，并且?guī)砹诵碌牟季址桨浮?br />




如上面的布局，我們用代碼實(shí)現(xiàn)主要部分。

.side-bar{

    float:left;

}

.main-content{

    float:left;

}

1

2

3

4

5

6

浮動(dòng)元素的排列

當(dāng)一個(gè)元素被設(shè)置為浮動(dòng)元素時(shí)，首先，它會(huì)被移除文檔流，設(shè)置float:left|right則元素會(huì)向設(shè)置方向排列，直到遇到父元素邊框(或者說最大寬度)或者另一個(gè)浮動(dòng)元素時(shí)停止。



當(dāng)設(shè)置父元素display:flex時(shí)，子元素的浮動(dòng)值無效！



浮動(dòng)解決的布局問題

使用浮動(dòng)我們可以解決傳統(tǒng)的兩列布局、三列布局的自適應(yīng)。下面代碼是用浮動(dòng)實(shí)現(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

效果如下





浮動(dòng)帶來的問題

父元素高度坍縮

一般來說新手在學(xué)習(xí)浮動(dòng)布局之后，遇到的第一個(gè)問題就是父元素高度坍縮。什么是高度坍縮？







看上圖，在父元素的四個(gè)子元素均為浮動(dòng)元素，由于浮動(dòng)元素的特性浮動(dòng)元素脫離文檔流，所以父元素不會(huì)被撐起高度。



如何解決？答案很簡(jiǎn)單，使用BFC塊級(jí)格式上下文。當(dāng)父元素為BFC的時(shí)候，內(nèi)部計(jì)算高度會(huì)帶上浮動(dòng)元素的高度。



不希望浮動(dòng)時(shí)清除浮動(dòng)

使用clear屬性可以使元素清除周圍的浮動(dòng)。





如上圖，對(duì)段落文字清除浮動(dòng)，導(dǎo)致原本環(huán)繞的文字，另起一行。順便解決了高度坍縮的問題。



總結(jié)

浮動(dòng)在帶來方便的同時(shí)也引入了新的問題，如果能處理好這些問題那么浮動(dòng)也可以當(dāng)做布局的主力，但是都已經(jīng)9102年了，我們應(yīng)該追隨CSS3的布局方案，盡量少使用浮動(dòng)。



定位布局

收拾房子的時(shí)候總會(huì)把物品按照相應(yīng)的位置放置，這樣會(huì)讓房間看上去更加整潔。所以，我們CSS也是可以這樣做的。



使用position屬性，調(diào)整元素的位置。position一共有四種定位類型：定位元素、相對(duì)定位、絕對(duì)定位、粘性定位，五種取值：static、relative、absolute、fixed、sticky。



名稱 描述 定位類型

static 該關(guān)鍵字指定元素使用正常的布局行為，即元素在文檔常規(guī)流中當(dāng)前的布局位置。此時(shí) top, right, bottom, left 和 z-index屬性無效。 定位元素

relative 該關(guān)鍵字下，元素先放置在未添加定位時(shí)的位置，再在不改變頁面布局的前提下調(diào)整元素位置（因此會(huì)在此元素未添加定位時(shí)所在位置留下空白）。position:relative 對(duì) table-*-group, table-row, table-column, table-cell, table-caption 元素?zé)o效。 相對(duì)定位

absolute 不為元素預(yù)留空間，通過指定元素相對(duì)于最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對(duì)定位的元素可以設(shè)置外邊距（margins），且不會(huì)與其他邊距合并。 絕對(duì)定位

fixed 不為元素預(yù)留空間，而是通過指定元素相對(duì)于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動(dòng)時(shí)不會(huì)改變。打印時(shí)，元素會(huì)出現(xiàn)在的每頁的固定位置。fixed 屬性會(huì)創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform 屬性非 none 時(shí)，容器由視口改為該祖先。 絕對(duì)定位

sticky 盒位置根據(jù)正常流計(jì)算(這稱為正常流動(dòng)中的位置)，然后相對(duì)于該元素在流中的 flow root（BFC）和 containing block（最近的塊級(jí)祖先元素）定位。在所有情況下（即便被定位元素為 table 時(shí)），該元素定位均不對(duì)后續(xù)元素造成影響。當(dāng)元素 B 被粘性定位時(shí)，后續(xù)元素的位置仍按照 B 未定位時(shí)的位置來確定。position: sticky對(duì) table 元素的效果與 position: relative相同。 粘性定位

一般使用position屬性時(shí)，會(huì)使用其相對(duì)定位與絕對(duì)定位、粘性定位，它們都使用top、bottom、left、right來調(diào)整自身位置，但是調(diào)整的基準(zhǔn)不一樣。



定位的應(yīng)用

static

static是元素正常出現(xiàn)在文檔流中的定位，文檔流中的排列為自上而下，自左至右。一般來說block元素自占一行，inline元素橫向排列。



正常情況下在我們的頁面中大部分元素為static定位，對(duì)于一些特殊需求我們需要使用其他定位。比如像wiki中的關(guān)鍵詞，鼠標(biāo)移動(dòng)上去的時(shí)候，關(guān)鍵詞下面顯示式卡片。



relative

relative是在實(shí)現(xiàn)一些特殊布局的時(shí)候經(jīng)常使用的一種定位方式。設(shè)置為relative的元素并不會(huì)脫離文檔流，但是可以通過top、bottom、left、right調(diào)整元素對(duì)于默認(rèn)基準(zhǔn)的位置。



.box {

  display: inline-block;

  width: 100px;

  height: 100px;

  background: red;

  color: white;

}

two {

  position: relative;

  top: 20px;

  left: 20px;

  background: blue;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14



使用相對(duì)定位可以實(shí)現(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

效果





但是，使用相對(duì)定位依然會(huì)出現(xiàn)一些問題。relative定位并不會(huì)脫離文檔流，所以.content元素的高度為200px。



absolute

與relative定位不同的是absolute是脫離文檔流的，而且相對(duì)基準(zhǔn)是position屬性不為static的祖先元素，如果祖先都是static則元素相對(duì)body定位。并且，對(duì)于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上面跑一下子。這個(gè)例子驗(yàn)證了absolute的排列方式。當(dāng)我們知道我們?cè)谧鍪驳臅r(shí)候，也就不需要墨守成規(guī)（對(duì)于absolute元素的父元素統(tǒng)一設(shè)置relative屬性）了。



高度坍縮

只要是脫離了文檔流的元素都會(huì)出現(xiàn)高度坍縮，所以在使用absolute屬性時(shí)，請(qǐng)確保父元素不會(huì)因此而改變。



對(duì)比float

Float與absolute都會(huì)使元素脫離文檔流，但是眾所周知對(duì)相同元素設(shè)置float與設(shè)置absolute會(huì)出現(xiàn)不同的效果。這是因?yàn)閒loat與absolute本身的排列不一樣。



float：脫離文檔流，排列時(shí)以父元素為基準(zhǔn)，并且會(huì)為占用其他浮動(dòng)元素的位置。



absolute：脫離文檔流，排列時(shí)分情況：第一種情況，對(duì)于未設(shè)置left、right、top、bottom屬性的元素，排列在正常顯示位置，并不占用空間。第二種情況，設(shè)置位置屬性的元素，基于非static祖先元素排列。



上面兩者比較顯著的差異為float會(huì)影響下一個(gè)float元素，但是absolute元素不會(huì)。



總結(jié)

說absolute為絕對(duì)定位也并不貼切，它也是基于祖先元素定位的，只是脫離了文檔流。我個(gè)人還是比較推薦在處理元素相對(duì)位置問題上使用absolute屬性的，但前提是您已經(jīng)深刻理解了absolute的排列方式。



fixed

不為元素預(yù)留空間，而是通過指定元素相對(duì)于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動(dòng)時(shí)不會(huì)改變。打印時(shí)，元素會(huì)出現(xiàn)在的每頁的固定位置。fixed 屬性會(huì)創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform 屬性非 none 時(shí)，容器由視口改為該祖先。



fixed元素也會(huì)脫離文檔流，并且和absolute元素一樣，當(dāng)不設(shè)置任何left、top、bottom、right值的時(shí)候，元素依然按照正常定位的位置放置。



祖先未使用transform:none

當(dāng)祖先元素未使用transform:none的時(shí)候，fixed元素相對(duì)于該祖先元素進(jìn)行定位。







在上面的圖片中，我設(shè)置小黃塊為fiexd屬性，并讓父元素設(shè)置為 使用transform:matrix(1, 0, 0, 1, 0, 0);，這時(shí)候小黃塊并沒有相對(duì)于body進(jìn)行定位，當(dāng)滾動(dòng)條下拉時(shí)，小黃塊定位固定在父元素左上角。



使用

fiexd元素一般用在如：to-top按鈕，或者側(cè)邊懸浮面板，或者懸浮導(dǎo)航欄之中。



sticky 粘性定位

盒位置根據(jù)正常流計(jì)算(這稱為正常流動(dòng)中的位置)，然后相對(duì)于該元素在流中的 flow root（BFC）和 containing block（最近的塊級(jí)祖先元素）定位。在所有情況下（即便被定位元素為 table 時(shí)），該元素定位均不對(duì)后續(xù)元素造成影響。當(dāng)元素 B 被粘性定位時(shí)，后續(xù)元素的位置仍按照 B 未定位時(shí)的位置來確定。position: sticky對(duì) table 元素的效果與 position: relative相同。



上面我們使用了fiexd與transform，發(fā)生了我們意想不到的效果，那就是fixed元素并未相對(duì)于body進(jìn)行移動(dòng)，也沒有在父元素中進(jìn)行標(biāo)準(zhǔn)的fixed定位。現(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>下面這個(gè)小黃塊設(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)我們向下滾動(dòng)的時(shí)候神奇的事情發(fā)生了。







小黃塊固定到了父元素的top:0位置了，不僅如此，再向上滑動(dòng)后，小黃塊又回復(fù)了當(dāng)時(shí)的位置，而且占用了文檔本身的位置。



使用這個(gè)特性我們可以制作浮動(dòng)的Header組件，當(dāng)用戶向下滑動(dòng)至窗口上側(cè)的時(shí)候，Header組件也跟隨窗口滑動(dòng)。



Flex布局

對(duì)于前端工程師來說，最讓人頭疼的莫過于自適應(yīng)布局。對(duì)于不同分辨率的設(shè)備要做到頁面統(tǒng)一，在CSS3出現(xiàn)之前，還是挺不容易的。還有就是前端工程師頭疼的一個(gè)布局問題：垂直居中。



CSS3中新出了一種布局技術(shù)：CSS彈性盒子布局，我們來看一下MDN是如何介紹的。



CSS 彈性盒子布局是 CSS 的模塊之一，定義了一種針對(duì)用戶界面設(shè)計(jì)而優(yōu)化的 CSS 盒子模型。在彈性布局模型中，彈性容器的子元素可以在任何方向上排布，也可以“彈性伸縮”其尺寸，既可以增加尺寸以填滿未使用的空間，也可以收縮尺寸以避免父元素溢出。子元素的水平對(duì)齊和垂直對(duì)齊都能很方便的進(jìn)行操控。通過嵌套這些框（水平框在垂直框內(nèi)，或垂直框在水平框內(nèi)）可以在兩個(gè)維度上構(gòu)建布局。



接下來，我會(huì)使用Flex布局技術(shù)，設(shè)計(jì)一些我們常使用頁面布局，并指出優(yōu)點(diǎn)與缺點(diǎn)。但是，我們首先要來看一下瀏覽器的支持程度。



瀏覽器支持

特性 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屬性。注：與社會(huì)脫軌的IE9并不支持Flex，如果想寫出兼容IE9的頁面，請(qǐng)不要使用Flex。



Flex使用介紹

使用flex務(wù)必清楚一些屬性概念。



Flex容器：對(duì)于一個(gè)基本元素(不含任何CSS屬性，如div)，設(shè)置display:flex，即可創(chuàng)建一個(gè)Flex容器。



Flex子項(xiàng)：父元素為Flex容器的元素，稱之為Flex子項(xiàng)，其排布受到父元素影響。注：一定是父元素為Flex容器的元素，祖先不算。



排布方向：指Flex子項(xiàng)在Flex容器中的排布方向。排布方向有兩種：column、row。在Flex容器上使用flex-direction: column|row(默認(rèn));即可設(shè)置。



主軸：指的Flex容器中是與排列方式相同的方向的軸。如設(shè)置Flex容器direction: column;則其主軸為豎直方向。



交叉軸：指的Flex容器中是與排列方式相反的方向的軸。如設(shè)置Flex容器direction: column;則其主軸為水平方向。



我們一定要清楚上面的基礎(chǔ)概念，這對(duì)深入使用Flex有很大的幫助。下面我會(huì)介紹一些Flex常用的屬性，主要分為兩部分：對(duì)Flex容器、對(duì)Flex子項(xiàng)。



Flex容器屬性

flex-direction 排布方向

flex-direction 屬性指定了內(nèi)部元素是如何在 flex 容器中布局的，定義了主軸的方向(正方向或反方向)。



flex-direction屬性接受以下值：



row:子項(xiàng)目在flex容器中橫向，從左至右排列。



row-reverse:表現(xiàn)和row相同，也是橫向，但是是從右到左。



column:子項(xiàng)在容器中豎向排列，從上至下。

這里不貼圖了

column-reverse:表現(xiàn)和column相同，子項(xiàng)在容器中豎向排列，從下至上。

這里不貼圖了

flex-wrap 控制換行

CSS flex-wrap 指定 flex 元素單行顯示還是多行顯示 。如果允許換行，這個(gè)屬性允許你控制行的堆疊方向。



取值:



nowrap(默認(rèn))

flex 的元素被擺放到到一行，這可能導(dǎo)致溢出 flex 容器。 cross-start 會(huì)根據(jù) flex-direction 的值 相當(dāng)于 start 或 before。

wrap

flex 元素 被打斷到多個(gè)行中。cross-start 會(huì)根據(jù) flex-direction 的值選擇等于start 或before。cross-end 為確定的 cross-start 的另一端。



wrap-reverse

和 wrap 的行為一樣，但是 cross-start 和 cross-end 互換。



flex-flow [排布方向/控制換行]的簡(jiǎn)稱

CSS flex-flow 屬性是 flex-direction 和 flex-wrap 的簡(jiǎn)寫。



示例：flex-flow: column-reverse wrap;



justify-content 子項(xiàng)目在主軸上的排布

CSS justify-content 屬性定義了瀏覽器如何分配順著父容器主軸的彈性元素之間及其周圍的空間。



justify-content同時(shí)受到父容器主軸的影響。



取值：



start



從行首開始排列。每行第一個(gè)元素與行首對(duì)齊，同時(shí)所有后續(xù)的元素與前一個(gè)對(duì)齊。



flex-start（默認(rèn)）



從行首開始排列。每行第一個(gè)彈性元素與行首對(duì)齊，同時(shí)所有后續(xù)的彈性元素與前一個(gè)對(duì)齊。



flex-end



從行尾開始排列。每行最后一個(gè)彈性元素與行尾對(duì)齊，其他元素將與后一個(gè)對(duì)齊。



center



伸縮元素向每行中點(diǎn)排列。每行第一個(gè)元素到行首的距離將與每行最后一個(gè)元素到行尾的距離相同。



left



伸縮元素一個(gè)挨一個(gè)在對(duì)齊容器得左邊緣，如果屬性的軸與內(nèi)聯(lián)軸不平行，則left的行為類似于start



right



元素以容器右邊緣為基準(zhǔn), 一個(gè)挨著一個(gè)對(duì)齊,如果屬性軸與內(nèi)聯(lián)軸不平行,則right的行為類似于start.



space-between



在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個(gè)元素與行首對(duì)齊，每行最后一個(gè)元素與行尾對(duì)齊。



space-around



在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個(gè)元素到行首的距離和每行最后一個(gè)元素到行尾的距離將會(huì)是相鄰元素之間距離的一半。



space-evenly



flex項(xiàng)都沿著主軸均勻分布在指定的對(duì)齊容器中。相鄰flex項(xiàng)之間的間距，主軸起始位置到第一個(gè)flex項(xiàng)的間距,主軸結(jié)束位置到最后一個(gè)flex項(xiàng)的間距，都完全一樣。



看上去與space-around的排布很相似，但其實(shí)還是有一些區(qū)別的。space-evenly會(huì)在每一行均勻分布間隙，而space-around是均勻分布項(xiàng)目。

借一張圖

看上去我們要學(xué)的屬性很多，但是其實(shí)我們只需要記住我們常用的幾個(gè)屬性就行:flex-start、flex-end、space-between、center、space-around、space-evenly。以上這幾個(gè)就是我們常用的屬性值，通過設(shè)置主軸方向、設(shè)置排列方式，我們可以靈活地組織我們的元素。



align-items 子項(xiàng)目在交叉軸排布

CSS align-items屬性將所有直接子節(jié)點(diǎn)上的align-self值設(shè)置為一個(gè)組。 align-self屬性設(shè)置項(xiàng)目在其包含塊中在交叉軸方向上的對(duì)齊方式。



取值：



normal



這個(gè)關(guān)鍵字的效果取決于我們處在什么布局模式中：在絕對(duì)定位的布局中，對(duì)于被替代的絕對(duì)定位盒子，這個(gè)效果和start的效果的一樣；對(duì)于其他所有絕對(duì)定位的盒子，這個(gè)效果和stretch的效果一樣。 在絕對(duì)定位布局的靜態(tài)位置上，效果和stretch一樣。對(duì)于那些彈性項(xiàng)目而言，效果和stretch一樣。對(duì)于那些網(wǎng)格項(xiàng)目而言，效果和stretch一樣，除了有部分比例或者一個(gè)固定大小的盒子的效果像start。這個(gè)屬性不適用于會(huì)計(jì)盒子和表格。



flex-start



元素向側(cè)軸起點(diǎn)對(duì)齊。



flex-end



元素向側(cè)軸終點(diǎn)對(duì)齊。



center



元素在側(cè)軸居中。如果元素在側(cè)軸上的高度高于其容器，那么在兩個(gè)方向上溢出距離相同。



因?yàn)閍lign-items其實(shí)和justify-content我這里就不放一些圖片湊字?jǐn)?shù)了。



align-content 定義多根軸線排布

該屬性對(duì)單行彈性盒子模型無效。（即：帶有flex-wrap: nowrap）。



CSS的align-content屬性設(shè)置了瀏覽器如何沿著伸縮盒子容器（flexbox container）的縱軸和網(wǎng)格容器（Grid Container）的主軸在內(nèi)容項(xiàng)之間和周圍分配空間。



它的取值和align-items差不多，經(jīng)常有人會(huì)把他們搞混。



align-content一般定義多行的交叉軸排列。



絕大多數(shù)情況下我們使用align-items即可實(shí)現(xiàn)我們的需求。



Flex子項(xiàng)屬性

order 子項(xiàng)排布靠前排名

CSS order 屬性規(guī)定了彈性容器中的可伸縮項(xiàng)目在布局時(shí)的順序。元素按照 order 屬性的值的增序進(jìn)行布局。擁有相同 order 屬性值的元素按照它們?cè)谠创a中出現(xiàn)的順序進(jìn)行布局。







取值：



<integer>



表示此可伸縮項(xiàng)目所在的次序組。



flex-grow 子項(xiàng)放大比例

CSS flex-grow 屬性定義彈性盒子項(xiàng)（flex item）的拉伸因子







取值：



<number>



默認(rèn)值0，即如果存在剩余空間，也不放大。負(fù)值無效。



flex-shrink 子項(xiàng)縮小比例

CSS flex-shrink 屬性指定了 flex 元素的收縮規(guī)則。flex 元素僅在默認(rèn)寬度之和大于容器的時(shí)候才會(huì)發(fā)生收縮，其收縮的大小是依據(jù) flex-shrink 的值。







總而言之，你定了這個(gè)屬性，其他項(xiàng)目會(huì)先壓榨你的空間，然后再均勻縮小其他項(xiàng)目。



flex-basis

flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。



注：分配多余空間之前！！



也就是說你給的flex-basis值大于當(dāng)前分配空間時(shí)，依然會(huì)被壓縮。



flex

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。



align-self

align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。



這個(gè)屬性了不得，它也是我們經(jīng)常用的子項(xiàng)目屬性之一。



.item {

  align-self: auto | flex-start | flex-end | center | baseline | stretch;

}

1

2

3





就像上面的圖，他可以決定子項(xiàng)目的交叉軸單獨(dú)排列方式。



Grid 布局

未完待續(xù)…明天補(bǔ)上



參考

HTML5語義化標(biāo)簽屬性-HTML5屬性手冊(cè)

All About Floats | CSS-Tricks

清除浮動(dòng)的四種方式及其原理理解

【前端Talkking】CSS系列——CSS深入理解之a(chǎn)bsolute定位

CSS 彈性盒子布局

Flex 布局教程：語法篇

藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。