文章序

作為一名合格的前端開發(fā)者，一定要熟練掌握各種頁(yè)面的布局方法，熟練掌握各種與布局相關(guān)的屬性，從事前端開發(fā)以來(lái)一直都沒有一個(gè)系統(tǒng)的總結(jié)，故在此進(jìn)行總結(jié)，也是一個(gè)系統(tǒng)性學(xué)習(xí)布局的開始。在這里我會(huì)盡可能總結(jié)前端布局相關(guān)的所有屬性及相關(guān)用法及案例，盡量做到言簡(jiǎn)意賅，好了，接下來(lái)我們開始吧

基礎(chǔ)

width,height

元素寬高，默認(rèn)值auto，包裹子元素的最小寬高，如無(wú)子元素則為0
可接受值
length：具體數(shù)值，xx px，xx cm等
%：以父元素的屬性為%取值
inherit：繼承自父元素

margin，border，padding,content

box模型

margin(外距):

用于控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達(dá)到相互隔開的目的
外邊距合并(疊加)是一個(gè)相當(dāng)簡(jiǎn)單的概念。但是，在實(shí)踐中對(duì)網(wǎng)頁(yè)進(jìn)行布局時(shí)，它會(huì)造成許多混淆，簡(jiǎn)單地說(shuō)，外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者

外邊距合并

當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。請(qǐng)看下圖：

外邊距合并

外邊距合并

如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并：

外邊距合并

合并與非合并對(duì)比

padding(內(nèi)距):

用于控制內(nèi)容與邊框之間的距離

border(邊框):

圍繞在內(nèi)邊距和內(nèi)容外的邊框，CSS 規(guī)范指出，邊框繪制在“元素的背景之上”。這很重要，因?yàn)橛行┻吙蚴恰伴g斷的”（例如，點(diǎn)線邊框或虛線框），元素的背景應(yīng)當(dāng)出現(xiàn)在邊框的可見部分之間

content(內(nèi)容):

盒子的內(nèi)容，顯示文本和圖像

background

設(shè)置元素的背景，可選屬性

background-color：

設(shè)置顏色，可以接受顏色-red；rgb-rgb（255,255,222）；透明-transparent；十六進(jìn)制-#F5F5F5；inherit-繼承自父元素

background-image：

設(shè)置背景圖片，可取值none，url（），inherit

background-position：

設(shè)置背景圖像的起始位置，這個(gè)屬性設(shè)置背景原圖像（由 [background-image] 定義）的位置，背景圖像如果要重復(fù)，將從這一點(diǎn)開始
需要兩個(gè)值，默認(rèn) 0 0；第一個(gè)值表示水平位置，值可取top，center，bottom，x%，x px；第二個(gè)值表示垂直位置，值可取left，center，right，x%，x px，如果兩個(gè)值只設(shè)置了第一個(gè)，第二個(gè)默認(rèn)center/50%/50%

background-position:bottom left

background-size：

設(shè)置背景圖片大小，默認(rèn)值auto
可接受值
length：具體數(shù)值，xx px，xx cm等，如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 "auto"
%：以父元素的屬性為%取值，如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 "auto"
contain：把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域

background-size:contain

cover：把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域，背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中

background-size:cover

background-origin：

background-origin 屬性規(guī)定 background-position 屬性相對(duì)于什么位置來(lái)定位，如果背景圖像的 background-attachment 屬性為 "fixed"，則該屬性沒有效果
可取的值：padding-box，content-box，border-box

background-origin:content-box

background-attachment：

設(shè)置背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)
可取的值
scroll：默認(rèn)值，背景圖像會(huì)隨著頁(yè)面其余部分的滾動(dòng)而移動(dòng)
fixed：當(dāng)頁(yè)面的其余部分滾動(dòng)時(shí)，背景圖像不會(huì)移動(dòng)
inherit：規(guī)定應(yīng)該從父元素繼承屬性的設(shè)置

background-repeat：

圖像重復(fù)，默認(rèn)值repeat，可選值repeat，no-repeat，repeat-x，repeat-y，inherit

background-clip：

規(guī)定背景的繪制區(qū)域
可取的值：padding-box，content-box，border-box，表示超出區(qū)域的圖片被裁減，即只從padding，content，border區(qū)域開始顯示圖片

position

這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過(guò)絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框，而不論該元素本身是什么類型。相對(duì)定位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移，特別復(fù)雜的布局建議使用子絕父相然后用top，right，bottom，left慢慢調(diào)布局，一般布局建議使用display:flex
可取值

absolute：

設(shè)置為絕對(duì)定位的元素框從文檔流完全刪除，并相對(duì)于其包含塊定位，包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像該元素原來(lái)不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中生成何種類型的框
絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。這一點(diǎn)與相對(duì)定位不同，相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置
絕對(duì)定位的元素的位置相相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位(relative)，如果元素沒有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊
對(duì)于定位的主要問(wèn)題是要記住每種定位的意義，相對(duì)定位是“相對(duì)于”元素在文檔中的初始位置，而絕對(duì)定位是“相對(duì)于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相對(duì)于”最初的包含塊，根據(jù)用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素
元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定

clip

剪裁絕對(duì)定位元素，這個(gè)屬性用于定義一個(gè)剪裁矩形。對(duì)于一個(gè)絕對(duì)定義元素，在這個(gè)矩形內(nèi)的內(nèi)容才可見。出了這個(gè)剪裁區(qū)域的內(nèi)容會(huì)根據(jù) overflow 的值來(lái)處理。剪裁區(qū)域可能比元素的內(nèi)容區(qū)大，也可能比內(nèi)容區(qū)小
可能的值
shape：設(shè)置元素的形狀。唯一合法的形狀值是：rect (top, right, bottom, left)
auto：默認(rèn)值。不應(yīng)用任何剪裁
inherit：規(guī)定應(yīng)該從父元素繼承 clip 屬性的值

relative：

相對(duì)定位是一個(gè)非常容易掌握的概念。如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。然后，可以通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)
如果將 top 設(shè)置為 20px，那么框?qū)⒃谠恢庙敳肯旅?20 像素的地方，如果 left 設(shè)置為 30 像素，那么會(huì)在元素左邊創(chuàng)建 30 像素的空間，也就是將元素向右移動(dòng)
注意，在使用相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來(lái)的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框

fixed：

生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位
元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定
比如返回頂部，聯(lián)系咨詢等功能一般用position:fixed

static：

默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）

inherit：

規(guī)定應(yīng)該從父元素繼承 position 屬性的值

z-index

設(shè)置元素的顯示優(yōu)先級(jí)，即為z軸的位置，數(shù)越大越靠近用戶，在更上層顯示，可以取負(fù)數(shù)

visibility

visibility 屬性規(guī)定元素是否可見
提示：即使不可見的元素也會(huì)占據(jù)頁(yè)面上的空間。請(qǐng)使用 "display" 屬性來(lái)創(chuàng)建不占據(jù)頁(yè)面空間的不可見元素
可能的值
visible：默認(rèn)值。元素是可見的
hidden：元素是不可見的
collapse：當(dāng)在表格元素中使用時(shí)，此值可刪除一行或一列，但是它不會(huì)影響表格的布局。被行或列占據(jù)的空間會(huì)留給其他內(nèi)容使用。如果此值被用在其他的元素上，會(huì)呈現(xiàn)為 "hidden"
inherit：規(guī)定應(yīng)該從父元素繼承 visibility 屬性的值

vertical-align,text-align,line-height

text-align：

text-align 屬性規(guī)定元素中的文本的水平對(duì)齊方式
該屬性通過(guò)指定行框與哪個(gè)點(diǎn)對(duì)齊，從而設(shè)置塊級(jí)元素內(nèi)文本的水平對(duì)齊方式。通過(guò)允許用戶代理調(diào)整行內(nèi)容中字母和字之間的間隔，可以支持值 justify；不同用戶代理可能會(huì)得到不同的結(jié)果
最后一個(gè)水平對(duì)齊屬性是 justify，它會(huì)帶來(lái)自己的一些問(wèn)題
值 justify 可以使文本的兩端都對(duì)齊。在兩端對(duì)齊文本中，文本行的左右兩端都放在父元素的內(nèi)邊界上。然后，調(diào)整單詞和字母間的間隔，使各行的長(zhǎng)度恰好相等。您也許已經(jīng)注意到了，兩端對(duì)齊文本在打印領(lǐng)域很常見。不過(guò)在 CSS 中，還需要多做些考慮

line-height：

該屬性會(huì)影響行框的布局。在應(yīng)用到一個(gè)塊級(jí)元素時(shí)，它定義了該元素中基線之間的最小距離而不是最大距離，line-height 與 font-size 的計(jì)算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部?？梢园@些內(nèi)容的最小框就是行框，原始數(shù)字值指定了一個(gè)縮放因子，后代元素會(huì)繼承這個(gè)縮放因子而不是計(jì)算值

vertical-align：

該屬性定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊。允許指定負(fù)長(zhǎng)度值和百分比值。這會(huì)使元素降低而不是升高。在表單元格中，這個(gè)屬性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對(duì)齊方式
可能的值
baseline：默認(rèn)，元素放置在父元素的基線上
sub：垂直對(duì)齊文本的下標(biāo)
super：垂直對(duì)齊文本的上標(biāo)
top：把元素的頂端與行中最高元素的頂端對(duì)齊
text-top：把元素的頂端與父元素字體的頂端對(duì)齊
middle：把此元素放置在父元素的中部
bottom：把元素的頂端與行中最低的元素的頂端對(duì)齊
text-bottom：把元素的底端與父元素字體的底端對(duì)齊
length： %使用 "line-height" 屬性的百分比值來(lái)排列此元素。允許使用負(fù)值
inherit：規(guī)定應(yīng)該從父元素繼承 vertical-align 屬性的值

overflow

這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。如果值為 scroll，不論是否需要，用戶代理都會(huì)提供一種滾動(dòng)機(jī)制。因此，有可能即使元素框中可以放下所有內(nèi)容也會(huì)出現(xiàn)滾動(dòng)條
可能的值
visible：默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外
hidden：內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的
scroll：內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容
auto：如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容
inherit：規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值

float

float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過(guò)在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素，如果浮動(dòng)非替換元素，則要指定一個(gè)明確的寬度；否則，它們會(huì)盡可能地窄，假如在一行之上只有極少的空間可供浮動(dòng)元素，那么這個(gè)元素會(huì)跳至下一行，這個(gè)過(guò)程會(huì)持續(xù)到某一行擁有足夠的空間為止
可能的值
left：元素向左浮動(dòng)
right：元素向右浮動(dòng)
none：默認(rèn)值。元素不浮動(dòng)，并會(huì)顯示在其在文本中出現(xiàn)的位置
inherit：規(guī)定應(yīng)該從父元素繼承 float 屬性的值
請(qǐng)看下圖，當(dāng)把框 1 向右浮動(dòng)時(shí)，它脫離文檔流并且向右移動(dòng)，直到它的右邊緣碰到包含框的右邊緣

再請(qǐng)看下圖，當(dāng)框 1 向左浮動(dòng)時(shí)，它脫離文檔流并且向左移動(dòng)，直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中，所以它不占據(jù)空間，實(shí)際上覆蓋住了框 2，使框 2 從視圖中消失，通過(guò)z-index可以設(shè)置顯示框1還是框2
如果把所有三個(gè)框都向左移動(dòng)，那么框 1 向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框

display

display 屬性規(guī)定元素應(yīng)該生成的框的類型，這個(gè)屬性用于定義建立布局時(shí)元素生成的顯示框類型。對(duì)于 HTML 等文檔類型，如果使用 display 不謹(jǐn)慎會(huì)很危險(xiǎn)，因?yàn)榭赡苓`反 HTML 中已經(jīng)定義的顯示層次結(jié)構(gòu)。對(duì)于 XML，由于 XML 沒有內(nèi)置的這種層次結(jié)構(gòu)，所有 display 是絕對(duì)必要的
如果規(guī)定了 !DOCTYPE，則 Internet Explorer 8 （以及更高版本）支持屬性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"
可能的值
none：此元素不會(huì)被顯示
block：此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符
inline：默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符
inline-block：行內(nèi)塊元素。（CSS2.1 新增的值）
list-item：此元素會(huì)作為列表顯示
run-in：此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示
table：此元素會(huì)作為塊級(jí)表格來(lái)顯示（類似 <table>），表格前后帶有換行符
inline-table：此元素會(huì)作為內(nèi)聯(lián)表格來(lái)顯示（類似 <table>），表格前后沒有換行符
table-row-group：此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 <tbody>）
table-header-group：此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 <thead>）
table-footer-group：此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 <tfoot>）
table-row：此元素會(huì)作為一個(gè)表格行顯示（類似 <tr>）
table-column-group：此元素會(huì)作為一個(gè)或多個(gè)列的分組來(lái)顯示（類似 <colgroup>）
table-column：此元素會(huì)作為一個(gè)單元格列顯示（類似 <col>）
table-cell：此元素會(huì)作為一個(gè)表格單元格顯示（類似 <td> 和 <th>）
table-caption：此元素會(huì)作為一個(gè)表格標(biāo)題顯示（類似 <caption>）
inherit：規(guī)定應(yīng)該從父元素繼承 display 屬性的值

flex布局

最后我們終于來(lái)到flex布局，這是前段開發(fā)中最強(qiáng)大的布局，簡(jiǎn)單幾行代碼就可以完成復(fù)雜的頁(yè)面布局，讓你免受float，position，display的困擾

在 flex 容器中默認(rèn)存在兩條軸，水平主軸(main axis) 和垂直的交叉軸(cross axis)，這是默認(rèn)的設(shè)置，當(dāng)然你可以通過(guò)修改使垂直方向變?yōu)橹鬏S，水平方向變?yōu)榻徊孑S，這個(gè)我們后面再說(shuō)
在容器中的每個(gè)單元塊被稱之為 flex item，每個(gè)項(xiàng)目占據(jù)的主軸空間為 (main size), 占據(jù)的交叉軸的空間為 (cross size)
這里需要強(qiáng)調(diào)，不能先入為主認(rèn)為寬度就是 main size，高度就是 cross size，這個(gè)還要取決于你主軸的方向，如果你垂直方向是主軸，那么項(xiàng)目的高度就是 main size

Flex 容器

首先，實(shí)現(xiàn) flex 布局需要先指定一個(gè)容器，任何一個(gè)容器都可以被指定為 flex 布局，這樣容器內(nèi)部的元素就可以使用 flex 來(lái)進(jìn)行布局

.container {
    display: flex | inline-flex;       //可以有兩種取值
}

分別生成一個(gè)塊狀或行內(nèi)的 flex 容器盒子。簡(jiǎn)單說(shuō)來(lái)，如果你使用塊元素如 div，你就可以使用 flex，而如果你使用行內(nèi)元素，你可以使用 inline-flex
需要注意的是：當(dāng)時(shí)設(shè)置 flex 布局之后，子元素的 float、clear、vertical-align 的屬性將會(huì)失效
有下面六種屬性可以設(shè)置在容器上，它們分別是：
flex-direction
flex-wrap
flex-flow(沒什么卵用，不用記)
justify-content
align-items
align-content

flex-direction: 決定主軸的方向(即項(xiàng)目的排列方向)

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

默認(rèn)值：row，主軸為水平方向，起點(diǎn)在左端

row-reverse：主軸為水平方向，起點(diǎn)在右端

column：主軸為垂直方向，起點(diǎn)在上沿

column-reverse：主軸為垂直方向，起點(diǎn)在下沿

flex-wrap: 決定容器內(nèi)項(xiàng)目是否可換行

默認(rèn)情況下，項(xiàng)目都排在主軸線上，使用 flex-wrap 可實(shí)現(xiàn)項(xiàng)目的換行

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

默認(rèn)值：nowrap 不換行，即當(dāng)主軸尺寸固定時(shí)，當(dāng)空間不足時(shí)，項(xiàng)目尺寸會(huì)隨之調(diào)整而并不會(huì)擠到下一行

wrap：項(xiàng)目主軸總尺寸超出容器時(shí)換行，第一行在上方

wrap-reverse：換行，第一行在下方

justify-content：定義了項(xiàng)目在主軸的對(duì)齊方式

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

建立在主軸為水平方向時(shí)測(cè)試，即 flex-direction: row

默認(rèn)值: flex-start 左對(duì)齊

flex-end：右對(duì)齊

center：居中

space-between：兩端對(duì)齊，項(xiàng)目之間的間隔相等，即剩余空間等分成間隙

space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等，所以項(xiàng)目之間的間隔比項(xiàng)目與邊緣的間隔大一倍

align-items: 定義了項(xiàng)目在交叉軸上的對(duì)齊方式

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

建立在主軸為水平方向時(shí)測(cè)試，即 flex-direction: row

默認(rèn)值為 stretch 即如果項(xiàng)目未設(shè)置高度或者設(shè)為 auto，將占滿整個(gè)容器的高度

假設(shè)容器高度設(shè)置為 100px，而項(xiàng)目都沒有設(shè)置高度的情況下，則項(xiàng)目的高度也為 100px

flex-start：交叉軸的起點(diǎn)對(duì)齊

假設(shè)容器高度設(shè)置為 100px，而項(xiàng)目分別為 20px, 40px, 60px, 80px, 100px, 則如上圖顯示。

flex-end：交叉軸的終點(diǎn)對(duì)齊

center：交叉軸的中點(diǎn)對(duì)齊

baseline: 項(xiàng)目的第一行文字的基線對(duì)齊

以文字的底部為主，仔細(xì)看圖可以理解

align-content: 定義了多根軸線的對(duì)齊方式，如果項(xiàng)目只有一根軸線，那么該屬性將不起作用

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

這個(gè)這樣理解：
當(dāng)你 flex-wrap 設(shè)置為 nowrap 的時(shí)候，容器僅存在一根軸線，因?yàn)轫?xiàng)目不會(huì)換行，就不會(huì)產(chǎn)生多條軸線
當(dāng)你 flex-wrap 設(shè)置為 wrap 的時(shí)候，容器可能會(huì)出現(xiàn)多條軸線，這時(shí)候你就需要去設(shè)置多條軸線之間的對(duì)齊方式了
建立在主軸為水平方向時(shí)測(cè)試，即 flex-direction: row, flex-wrap: wrap

默認(rèn)值為 stretch，看下面的圖就很好理解了

從圖可以看出又三條軸線(因?yàn)槿萜鲗挾扔邢?，當(dāng)值為 stretch 時(shí)會(huì)三條軸線平分容器的垂直方向上的空間

值得注意的是，雖然在每條軸線上項(xiàng)目的默認(rèn)值也為 stretch，但是由于我每個(gè)項(xiàng)目我都設(shè)置了高度，所以它并沒有撐開整個(gè)容器。如果項(xiàng)目不設(shè)置高度的話就會(huì)變成下面這樣：

這個(gè)我在前面也有提到(align-items)，這里重點(diǎn)還是理解三條軸線會(huì)平分垂直軸上的空間

flex-start：軸線全部在交叉軸上的起點(diǎn)對(duì)齊

flex-end：軸線全部在交叉軸上的終點(diǎn)對(duì)齊

center：軸線全部在交叉軸上的中間對(duì)齊

space-between：軸線兩端對(duì)齊，之間的間隔相等，即剩余空間等分成間隙。

space-around：每個(gè)軸線兩側(cè)的間隔相等，所以軸線之間的間隔比軸線與邊緣的間隔大一倍。

到這里關(guān)于容器上的所有屬性都講完了

Flex 項(xiàng)目屬性：

有六種屬性可運(yùn)用在 item 項(xiàng)目上：

1. order
2. flex-basis
3. flex-grow
4. flex-shrink
5. flex
6. align-self

order: 定義項(xiàng)目在容器中的排列順序，數(shù)值越小，排列越靠前，默認(rèn)值為 0

.item {
    order: <integer>;
}

在 HTML 結(jié)構(gòu)中，雖然 -2，-1 的 item 排在后面，但是由于分別設(shè)置了 order，使之能夠排到最前面。

flex-basis: 定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間，瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間

.item {
    flex-basis: <length> | auto;
}

默認(rèn)值：auto，即項(xiàng)目本來(lái)的大小, 這時(shí)候 item 的寬高取決于 width 或 height 的值。
當(dāng)主軸為水平方向的時(shí)候，當(dāng)設(shè)置了 flex-basis，項(xiàng)目的寬度設(shè)置值會(huì)失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能發(fā)揮效果。

• 當(dāng) flex-basis 值為 0 % 時(shí)，是把該項(xiàng)目視為零尺寸的，故即使聲明該尺寸為 140px，也并沒有什么用。
• 當(dāng) flex-basis 值為 auto 時(shí)，則跟根據(jù)尺寸的設(shè)定值(假如為 100px)，則這 100px 不會(huì)納入剩余空間。

flex-grow: 定義項(xiàng)目的放大比例

.item {
    flex-grow: <number>;
}

默認(rèn)值為 0，即如果存在剩余空間，也不放大

當(dāng)所有的項(xiàng)目都以 flex-basis 的值進(jìn)行排列后，仍有剩余空間，那么這時(shí)候 flex-grow 就會(huì)發(fā)揮作用了
如果所有項(xiàng)目的 flex-grow 屬性都為 1，則它們將等分剩余空間。(如果有的話)
如果一個(gè)項(xiàng)目的 flex-grow 屬性為 2，其他項(xiàng)目都為 1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍
當(dāng)然如果當(dāng)所有項(xiàng)目以 flex-basis 的值排列完后發(fā)現(xiàn)空間不夠了，且 flex-wrap：nowrap 時(shí)，此時(shí) flex-grow 則不起作用了，這時(shí)候就需要接下來(lái)的這個(gè)屬性。

flex-shrink: 定義了項(xiàng)目的縮小比例

.item {
    flex-shrink: <number>;
}

默認(rèn)值: 1，即如果空間不足，該項(xiàng)目將縮小，負(fù)值對(duì)該屬性無(wú)效

這里可以看出，雖然每個(gè)項(xiàng)目都設(shè)置了寬度為 50px，但是由于自身容器寬度只有 200px，這時(shí)候每個(gè)項(xiàng)目會(huì)被同比例進(jìn)行縮小，因?yàn)槟J(rèn)值為 1
同理可得：
如果所有項(xiàng)目的 flex-shrink 屬性都為 1，當(dāng)空間不足時(shí)，都將等比例縮小。
如果一個(gè)項(xiàng)目的 flex-shrink 屬性為 0，其他項(xiàng)目都為 1，則空間不足時(shí)，前者不縮小。

flex: flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫

.item{
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
} 

flex 的默認(rèn)值是以上三個(gè)屬性值的組合。假設(shè)以上三個(gè)屬性同樣取默認(rèn)值，則 flex 的默認(rèn)值是 0 1 auto
有關(guān)快捷值：auto (1 1 auto) 和 none (0 0 auto)
關(guān)于 flex 取值，還有許多特殊的情況，可以按以下來(lái)進(jìn)行劃分：

• 當(dāng) flex 取值為一個(gè)非負(fù)數(shù)字，則該數(shù)字為 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

• 當(dāng) flex 取值為 0 時(shí)，對(duì)應(yīng)的三個(gè)值分別為 0 1 0%

.item {flex: 0;}
.item {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 0%;
}

• 當(dāng) flex 取值為一個(gè)長(zhǎng)度或百分比，則視為 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情況（注意 0% 是一個(gè)百分比而不是一個(gè)非負(fù)數(shù)字）

.item-1 {flex: 0%;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-2 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 24px;
}

• 當(dāng) flex 取值為兩個(gè)非負(fù)數(shù)字，則分別視為 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：

.item {flex: 2 3;}
.item {
    flex-grow: 2;
    flex-shrink: 3;
    flex-basis: 0%;
}

• 當(dāng) flex 取值為一個(gè)非負(fù)數(shù)字和一個(gè)長(zhǎng)度或百分比，則分別視為 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {flex: 11 32px;}
.item {
    flex-grow: 11;
    flex-shrink: 1;
    flex-basis: 32px;
}

建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)寫三個(gè)分離的屬性
grow 和 shrink 是一對(duì)雙胞胎，grow 表示伸張因子，shrink 表示是收縮因子
grow 在 flex 容器下的子元素的寬度和比容器和小的時(shí)候起作用。 grow 定義了子元素的尺寸增長(zhǎng)因子，容器中除去子元素之和剩下的尺寸會(huì)按照各個(gè)子元素的 grow 值進(jìn)行平分加大各個(gè)子元素上

1. 當(dāng) flex-wrap 為 wrap | wrap-reverse，且子項(xiàng)寬度和不及父容器寬度時(shí)，flex-grow 會(huì)起作用，子項(xiàng)會(huì)根據(jù) flex-grow 設(shè)定的值放大（為0的項(xiàng)不放大）
2. 當(dāng) flex-wrap 為 wrap | wrap-reverse，且子項(xiàng)寬度和超過(guò)父容器寬度時(shí)，首先一定會(huì)換行，換行后，每一行的右端都可能會(huì)有剩余空間（最后一行包含的子項(xiàng)可能比前幾行少，所以剩余空間可能會(huì)更大），這時(shí) flex-grow 會(huì)起作用，若當(dāng)前行所有子項(xiàng)的 flex-grow 都為0，則剩余空間保留，若當(dāng)前行存在一個(gè)子項(xiàng)的 flex-grow 不為0，則剩余空間會(huì)被 flex-grow 不為0的子項(xiàng)占據(jù)
3. 當(dāng) flex-wrap 為 nowrap，且子項(xiàng)寬度和不及父容器寬度時(shí)，flex-grow 會(huì)起作用，子項(xiàng)會(huì)根據(jù) flex-grow 設(shè)定的值放大（為0的項(xiàng)不放大）
4. 當(dāng) flex-wrap 為 nowrap，且子項(xiàng)寬度和超過(guò)父容器寬度時(shí)，flex-shrink 會(huì)起作用，子項(xiàng)會(huì)根據(jù) flex-shrink 設(shè)定的值進(jìn)行縮?。?的項(xiàng)不縮?。５@里有一個(gè)較為特殊情況，就是當(dāng)這一行所有子項(xiàng) flex-shrink 都為0時(shí)，也就是說(shuō)所有的子項(xiàng)都不能縮小，就會(huì)出現(xiàn)討厭的橫向滾動(dòng)條
5. 總結(jié)上面四點(diǎn)，可以看出不管在什么情況下，在同一時(shí)間，flex-shrink 和 flex-grow 只有一個(gè)能起作用，這其中的道理細(xì)想起來(lái)也很淺顯：空間足夠時(shí)，flex-grow 就有發(fā)揮的余地，而空間不足時(shí)，flex-shrink 就能起作用。當(dāng)然，flex-wrap 的值為 wrap | wrap-reverse 時(shí)，表明可以換行，既然可以換行，一般情況下空間就總是足夠的，flex-shrink 當(dāng)然就不會(huì)起作用

align-self: 允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式

單個(gè)項(xiàng)目覆蓋 align-items 定義的屬性
默認(rèn)值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch。

.item {
     align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

這個(gè)跟 align-items 屬性時(shí)一樣的，只不過(guò) align-self 是對(duì)單個(gè)項(xiàng)目生效的，而 align-items 則是對(duì)容器下的所有項(xiàng)目生效的

總結(jié)

到這里本篇文章基本上就結(jié)束了，日后有新的知識(shí)點(diǎn)或者我要更新相關(guān)代碼或圖片會(huì)隨時(shí)更新。相信對(duì)于有需要的人來(lái)講應(yīng)該還是有很多幫助，筆者在完整的整理過(guò)之后受益匪淺，最后，愿與諸君共勉。