看到一篇博客，覺(jué)得寫得很好，就將跟本次作業(yè)有關(guān)的部分搬運(yùn)過(guò)來(lái)了。純手打，順便學(xué)會(huì)了markdown語(yǔ)法，收獲頗多。

引用自：原文鏈接

彈性布局之彈性容器

一、概括

flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。采用 Flex 布局的元素，稱為 Flex 容器（flex container）。它的所有子元素自動(dòng)成為容器成員，稱為 Flex 項(xiàng)目（flex item）。
Flexbox布局的最大特性就是讓Flex項(xiàng)目可伸縮，也就是讓Flex項(xiàng)目的寬度和高度可以自動(dòng)填充Flex容器剩余的空間或者縮小Flex項(xiàng)目適配Flex容器不足的寬度。而這一切都是依賴于Flexbox屬性中的flex屬性來(lái)完成。一個(gè)Flex容器會(huì)等比的按照各Flex項(xiàng)目的擴(kuò)展比率分配Flex容器剩余空間，也會(huì)按照收縮比率來(lái)縮小各Flex項(xiàng)目，以免Flex項(xiàng)目溢出Flex容器。

二、flex屬性

1.容器屬性

1.1.flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap。

1.2.flex-direction

flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。

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

1.3.flex-wrap

默認(rèn)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下就會(huì)換行。
（1）nowrap（默認(rèn)）：不換行
（2）wrap：換行，第一行在上方。
（3）wrap-reverse：換行，第一行在下方。

1.4.justify-content

justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。它可能取5個(gè)值，具體對(duì)齊方式與軸的方向有關(guān)。下面假設(shè)主軸為從左到右。
   flex-start（默認(rèn)值）：左對(duì)齊
   flex-end：右對(duì)齊
   center： 居中
   space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。
   space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

1.5.align-items

align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。它可能取5個(gè)值。具體的對(duì)齊方式與交叉軸的方向有關(guān)，下面假設(shè)交叉軸從上到下
   flex-start：交叉軸的起點(diǎn)對(duì)齊。
   flex-end：交叉軸的終點(diǎn)對(duì)齊。
   center：交叉軸的中點(diǎn)對(duì)齊。
   baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
   stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。

1.6.align-content

align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。它可能取以下值。
   flex-start：與交叉軸的起點(diǎn)對(duì)齊。
   flex-end：與交叉軸的終點(diǎn)對(duì)齊。
   center：與交叉軸的中點(diǎn)對(duì)齊。
   space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。
   space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
   space-evenly：可以使每個(gè)元素之間和元素距離邊距的距離都相等，但是兼容性比較差。
   stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。

作業(yè)部分：

將源碼中的9個(gè)demo以及對(duì)應(yīng)的css文件全部掌握, 直到能默寫出來(lái)

DEMO1:塊級(jí)彈性容器以及行內(nèi)彈性容器

DEMO2： 彈性容器做導(dǎo)航

DEMO3:定義彈性容器的主軸方向：彈性元素的主軸上的排列方向

DEMO4:用彈性容器創(chuàng)建網(wǎng)站首頁(yè)

DEMO5:彈性元素溢出與創(chuàng)建多行容器1

DEMO6:彈性元素溢出與創(chuàng)建多行容器2

DEMO7:彈性元素在主軸上如何分布

DEMO8:使用彈性元素主軸對(duì)齊改寫導(dǎo)航

DEMO9:彈性元素在垂直方向（交叉軸）上的對(duì)齊方式