注：Flexbox布局比較適合Web應(yīng)用程序的一些小組件和小規(guī)模的布局，而Grid布局（網(wǎng)格單元格布局）更適合用于一些大規(guī)模的布局。

因?yàn)镕lexbox是一個(gè)模塊，而不是一個(gè)單一的屬性，他涉及很多東西。其中有些概念是需要我們?nèi)ダ斫獾模热纭癴lex容器”-->一些屬于容器上的屬性(父元素)；“flex項(xiàng)目”-->一些屬于容器子元素上的屬性；

三、Flex容器屬性(添加在父級(jí)元素上的)

1）display：定義一個(gè)Flex容器，根據(jù)其取的值來決定是內(nèi)聯(lián)還是塊。Flex容器會(huì)為其內(nèi)容建立新的伸縮格式化上下文。

兩種方式

display : flex

display : inline-flex

這樣做將元素定義為彈性容器，其子元素即彈性子元素。

flex 值表示彈性容器為塊級(jí)。占用一行。

inline-flex 值表示彈性容器為行內(nèi)元素，可以多個(gè)元素并列在一行 。

圖3-1

2）flex-direction：創(chuàng)建方軸，從而定義Flex項(xiàng)目在Flex容器中放置的方向。

Flexbox是一種單方向的布局概念。認(rèn)為Flex項(xiàng)目主要排列方式要么是水平排列，要么是垂直列排列

.container {
flex-direction: row | row-reverse | column | column-reverse;
} 

3）flex-wrap：默認(rèn)情況之下，F(xiàn)lex項(xiàng)目都盡可能在一行顯示。你可以根據(jù)flex-wrap的屬性值來改變，讓Flex項(xiàng)目多行顯示。方向在這也扮演了一個(gè)重要角度，決定新的一行堆放方向。

.container {
flex-wrap: nowrap | wrap | wrap-reverse;
} 

圖4-1

4）flex-flow(適用于flex容器元素)：

這是flex-direction和flex-wrap兩個(gè)屬性的縮寫。兩個(gè)屬性決定了伸縮容器的主軸與側(cè)軸。默認(rèn)值是row nowrap（中間用空格隔開）。

語法：

flex-flow: <‘flex-direction’> || <‘flex-wrap’> 

5）justify-content：設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式

justify-content：flex-start | flex-end | center | space-between | space-around

當(dāng)彈性盒里一行上的所有子元素都不能伸縮或已經(jīng)達(dá)到其最大值時(shí)，這一屬性可協(xié)助對(duì)多余的空間進(jìn)行分配。當(dāng)元素溢出某行時(shí)，這一屬性同樣會(huì)在對(duì)齊上進(jìn)行控制

圖5-1

圖5-2

6）align-items：定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對(duì)齊方式。

align-items： flex-start | flex-end | center | baseline(項(xiàng)目位于容器的基線上) | stretch(默認(rèn)值。);

伸縮項(xiàng)目可以在伸縮容器的當(dāng)前行的側(cè)軸上進(jìn)行對(duì)齊，這類似于justify-content屬性，但是是另一個(gè)方向。align-items可以用來設(shè)置伸縮容器中包括匿名伸縮項(xiàng)目的所有項(xiàng)目的對(duì)齊方式。

圖6-1

圖6-2

7）align-content：

align-content：flex-start |flex-end|center|space-between|space-around | stretch

當(dāng)伸縮容器的側(cè)軸還有多余空間時(shí)，align-content屬性可以用來調(diào)準(zhǔn)伸縮行在伸縮容器里的對(duì)齊方式，這與調(diào)準(zhǔn)伸縮項(xiàng)目在主軸上對(duì)齊方式的justify-content屬性類似。請(qǐng)注意本屬性在只有一行的伸縮容器上沒有效果。

圖7-1

圖7-2

四、Flex項(xiàng)目屬性(添加在子元素上的)

1）order：<integer>：用整數(shù)值來定義排列順序，數(shù)值小的排在前面?？梢詾樨?fù)值。

默認(rèn)情況，F(xiàn)lex項(xiàng)目是按文檔源的流順序排列。然而，在Flex容器中可以通過order屬性來控制Flex項(xiàng)目的順序源。設(shè)置或檢索彈性盒模型對(duì)象的子元素出現(xiàn)的順序。

order定義將會(huì)影響 <' position '> 值為static元素的層疊級(jí)別，數(shù)值小的會(huì)被數(shù)值大的蓋住。

圖1-1

圖1-2

2）flex-grow：number該屬性控制flex容器是單行或者多行，同時(shí)橫軸的方向決定了新行堆疊的方向。

該屬性控制flex容器是單行或者多行，同時(shí)橫軸的方向決定了新行堆疊的方向。如果所有Flex項(xiàng)目的flex-grow設(shè)置為1時(shí)，表示Flex容器中的Flex項(xiàng)目具有相等的尺寸。如果你給其中一個(gè)Flex項(xiàng)目設(shè)置flex-grow的值為2，那么這個(gè)Flex項(xiàng)目的尺寸將是其他Flex項(xiàng)目兩倍（其他Flex項(xiàng)目的flex-grow值為1）。注意：flex-grow取負(fù)值將失效。

圖2-1

3）flex-shrink：<number>設(shè)置或檢索彈性盒的收縮比率

根據(jù)彈性盒子元素所設(shè)置的收縮因子作為比率來收縮空間。注意：flex-shrink取負(fù)值將失效。

圖3-1

4）flex-basis:<length> | <percentage> | auto | content

設(shè)置或檢索彈性盒伸縮基準(zhǔn)值。如果所有子元素的基準(zhǔn)值之和大于剩余空間，則會(huì)根據(jù)每項(xiàng)設(shè)置的基準(zhǔn)值，按比率伸縮剩余空間。

如果設(shè)置為0，內(nèi)容不在考慮周圍額外空間。如果設(shè)置為auto，額外空間會(huì)基于flex-grow值做分布。如下圖所示：

圖4-1

5）flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

復(fù)合屬性。設(shè)置或檢索彈性盒模型對(duì)象的子元素如何分配空間。

flex是flex-grow，flex-shrink和flex-basis三個(gè)屬性的縮寫。第二個(gè)和第三個(gè)參數(shù)(flex-shrink和flex-basis)是可選值。其默認(rèn)值是0 1 auto。

如果縮寫「flex: 1」, 則其計(jì)算值為「1 1 0%」

如果縮寫「flex: auto」, 則其計(jì)算值為「1 1 auto」

如果「flex: none」, 則其計(jì)算值為「0 0 auto」

如果「flex: 0 auto」或者「flex: initial」, 則其計(jì)算值為「0 1 auto」，即「flex」初始值

圖5-1

圖5-2

6）align-self：auto | flex-start | flex-end | center | baseline | stretch

定義flex子項(xiàng)單獨(dú)在側(cè)軸（縱軸）方向上的對(duì)齊方式。

注意：float，clear和vertical-align屬性在Flex項(xiàng)目中無效。

圖6-1

圖6-2

五、媒體查詢的概念和應(yīng)用

1）媒體查詢的引用方法

在實(shí)際中媒體類型有近10中之多，實(shí)際常用的也就那么幾種。不同的媒體類型引用方法也是有很多的，常見的媒體類型的引用主要有：link標(biāo)簽、xml方式、@import和css3新增的@import幾種。

1、 link方法：

link方法引入類型其實(shí)就是在<link>標(biāo)簽引入樣式的時(shí)候，通過link標(biāo)簽中的media屬性來制定不同的媒體類型，這種方式引入媒體類型時(shí)常跟著引用的樣式文件走。如：

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

2、 @media方式

@media是css3中新引進(jìn)的一個(gè)特性，被稱為媒體查詢。在頁面中也可以通過這個(gè)屬性來引入媒體查詢，它和@import有點(diǎn)類似，也是具有2中方式

A：在樣式文件中引入媒體類型：

@media screen{ 選擇器{ 你的樣式代碼 } }

B：使用@media 引入媒體類型的方式是在head標(biāo)簽中的style引入

<head>
<style type="text/css">
@media screen{選擇器{你的代碼樣式}}
</style>
</head>

2）常用Media query設(shè)備特性

圖2-1

六、Responsive web design 響應(yīng)式設(shè)計(jì)布局概念

1）Responsive 設(shè)計(jì)特點(diǎn)

Responsive 網(wǎng)頁設(shè)計(jì)不但要考慮其元素布局的秩序，還要做到“有求必應(yīng)”，因此需要滿足三個(gè)條件。

1、網(wǎng)站必須建立靈活的網(wǎng)格基礎(chǔ)；

2、引用到網(wǎng)站的圖片必須是可伸縮的；

3、不同的顯示風(fēng)格，需要在Media Query上設(shè)置不同的樣式

注意：缺少任何一個(gè)功能，就不能稱為是合格的Responsive 網(wǎng)頁設(shè)計(jì)

2）Responsive 中的術(shù)語

1、流體網(wǎng)格

流體網(wǎng)格是一個(gè)簡單的網(wǎng)格系統(tǒng)，這種網(wǎng)格設(shè)計(jì)參考了流體設(shè)計(jì)中的網(wǎng)格系統(tǒng)，將每個(gè)網(wǎng)格格子使用百分比單位
來控制網(wǎng)格大小，這種網(wǎng)格系統(tǒng)最大的好處就是讓網(wǎng)格大小隨時(shí)根據(jù)屏幕尺寸做出相對(duì)應(yīng)的比例縮放。

2、彈性圖片

彈性圖片指的是不給圖片設(shè)置固定尺寸，而是根據(jù)流體網(wǎng)格進(jìn)行縮放，用于適應(yīng)各種網(wǎng)格的尺寸。而實(shí)現(xiàn)方法是

比較簡單，一條代碼就能確定 比如img{max-width：100%；}但是在IE8瀏覽器會(huì)出現(xiàn)圖片失蹤的bug，如果

我們給每個(gè)斷點(diǎn)提供不同的圖片是比較頭疼的一件事情，所以我們可以使用：

1）、使用background-image給元素添加背景圖片

2）、顯示/隱藏父元素，給父元素使用不同的圖片，然后通過media query來控制這些圖片顯示或者隱藏

3、媒體查詢

媒體查詢可以根據(jù)設(shè)備的尺寸，查詢出適配的樣式，使用這個(gè)屬性可以根據(jù)用戶終端設(shè)備適配對(duì)
應(yīng)的樣式，Responsive 設(shè)計(jì)最關(guān)注的的是根據(jù)用戶的使用設(shè)備的當(dāng)前寬度，web頁面將加載一個(gè)備用的樣式，
實(shí)現(xiàn)特定的頁面風(fēng)格

4、屏幕分辨率

指的是用戶使用的設(shè)備瀏覽web頁面時(shí)的分辨率，比如智能手機(jī)瀏覽器，移動(dòng)電腦瀏覽器，平板
電腦瀏覽器和桌面瀏覽器。只有知道有哪種分辨率，才能調(diào)用對(duì)應(yīng)的樣式。

5、主要斷點(diǎn)：

簡單來說就是設(shè)備寬度的臨界點(diǎn)，媒體特性中min-width和max-width對(duì)應(yīng)的屬性值就是響應(yīng)式
設(shè)計(jì)中的斷點(diǎn)值，簡單來說就是使用主要斷點(diǎn)和次要斷點(diǎn)，創(chuàng)建媒體查詢的條件，而每個(gè)斷點(diǎn)會(huì)對(duì)應(yīng)一個(gè)樣式文件。

設(shè)置斷點(diǎn)要把握以下3個(gè)要點(diǎn)

1）、滿足主要的斷點(diǎn)

2）、有可能的話添加一些別的斷點(diǎn)

3）、設(shè)置高于1024px的桌面斷點(diǎn)。

圖5-1

3）Responsive 布局技巧

1.盡量少用無關(guān)緊要的div

2.不要使用內(nèi)聯(lián)元素(inline)

3.盡量少用js或flash

4.丟去沒用的絕對(duì)定位和浮動(dòng)樣式

5.屏棄任何冗余結(jié)構(gòu)和不使用100%設(shè)置

那么有哪些設(shè)置能幫助Responsive確定更好的布局呢？

1.使用HTML5 Doctype和相關(guān)指南

2.重置好你的樣式（reset.css）

3.一個(gè)簡單的有語義的核心布局

4.給重要的網(wǎng)頁元素使用簡單的技巧，比如導(dǎo)航菜單之類元素

4）Meta 標(biāo)簽定義

為了讓智能手機(jī)根據(jù)媒體查詢匹配對(duì)應(yīng)的樣式，特意添加了一個(gè)特殊的meta標(biāo)簽。主要作用就是讓智能手機(jī)瀏覽網(wǎng)頁時(shí)能進(jìn)行優(yōu)化，并且可以自定義可視區(qū)域的尺寸和縮放級(jí)別。

設(shè)置Meta標(biāo)簽

<name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

這段代碼的幾個(gè)參數(shù)解釋：

width = device-width：寬度等于當(dāng)前設(shè)備的寬度

initial-scale： 初始的縮放比例（默認(rèn)設(shè)置為1.0）

minimum-scale：允許用戶縮放到的最小比例（默認(rèn)設(shè)置為1.0）

maximum-scale：允許用戶縮放到的最大比例（默認(rèn)設(shè)置為1.0）

user-scalable：用戶是否可以手動(dòng)縮放（默認(rèn)設(shè)置為no，因?yàn)槲覀儾幌Ｍ脩舴糯罂s小頁面）

常見的一些網(wǎng)頁布局單位

px：絕對(duì)單位，頁面按精確像素展示

em：相對(duì)單位，基準(zhǔn)點(diǎn)為父節(jié)點(diǎn)字體的大小，如果自身定義了font-size按自身來計(jì)算（瀏覽器默認(rèn)字體是16px），整個(gè)頁面內(nèi)1em不是一個(gè)固定的值。

rem：相對(duì)單位，可理解為”root em”, 相對(duì)根節(jié)點(diǎn)html的字體大小來計(jì)算，CSS3新加屬性，chrome/firefox/IE9+支持。

(另外需注意chrome強(qiáng)制最小字體為12號(hào)，即使設(shè)置成 10px 最終都會(huì)顯示成 12px，當(dāng)把html的font-size設(shè)置成10px,子節(jié)點(diǎn)rem的計(jì)算還是以12px為基準(zhǔn)，所以網(wǎng)上很多文章提到的將html的font-size設(shè)為10方便計(jì)算不是那么可取)。

rem在移動(dòng)端應(yīng)用可參考淘寶的頁面http://m.taobao.com (html的font-size通過動(dòng)態(tài)計(jì)算獲取)

vw：viewpoint width，視窗寬度，1vw等于視窗寬度的1%。

vh：viewpoint height，視窗高度，1vh等于視窗高度的1%。

vmin：vw和vh中較小的那個(gè)。

vmax：vw和vh中較大的那個(gè)。

vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持

七、CSS3多列布局

1、column-count：分欄的個(gè)數(shù)

2、column-width：分欄的寬度

3、column-gap：分欄的間距

4、column-rule：分欄的邊框

5、column-span：all/1合并分欄 火狐不支持