如果一個(gè)人要去管理十幾個(gè)島嶼，對(duì)島嶼管理的第一步是了解每一個(gè)島嶼的情況，然后才是了解島嶼間的經(jīng)濟(jì)來往。知識(shí)也是這樣，每一個(gè)知識(shí)點(diǎn)都是一個(gè)島嶼，先把每一個(gè)點(diǎn)了解透徹，才能靈活地將各個(gè)點(diǎn)串聯(lián)、組合以此實(shí)現(xiàn)自己的目的。
彈性盒學(xué)習(xí)的第一步，就是對(duì)與彈性盒有關(guān)的每一個(gè)屬性、每一點(diǎn)進(jìn)行全面的掃蕩。
1. flex 容器和 flex 項(xiàng)目
flex 項(xiàng)目與 flex 容器的關(guān)系通過名稱就可以了解，flex 項(xiàng)目是 flex 容器中的元素，一個(gè)容器可以包含多個(gè)項(xiàng)目。使一個(gè)元素變?yōu)?flex 容器，只需將該元素的 disply 設(shè)為 flex。如果你想將行內(nèi)元素設(shè)置為 flex 容器，可以將元素的 display 設(shè)置為 inline-flex。設(shè)置了 flex 容器后，容器的子元素會(huì)自動(dòng)成為 flex 項(xiàng)。
<p>
<span></span>
<span></sapn>
</p>
p {
daiplay: flex;
}
就像上面第一段代碼,設(shè)置下方的 CSS 屬性后，p 變?yōu)?felx 容器，p 內(nèi)部的兩個(gè) span 元素就變?yōu)榱?flex 項(xiàng)。
2. main axis（主軸）和 cross axis (交叉軸)
主軸是指沿著 flex 元素放置方向延伸的軸，主軸的開始的位置稱為 main start ,主軸的結(jié)束的位置成為 main end 。垂直于主軸的是交叉軸，與主軸一樣，交叉軸開始的位置稱為 cross start ，結(jié)束的位置稱為 cross end.默認(rèn)情況下，主軸的方向默認(rèn)是 row ,即 flex 項(xiàng)沿行由左向右進(jìn)行排列。主軸的方向可以由容器的 flex-direction 屬性改變。
flex-direction: row | row-reverse | column | column-reverse
row-reverse 指 flex 項(xiàng)由右向左進(jìn)行排列，main start在為容器的最右邊。column 則將主軸方向變?yōu)橛缮系较隆?/p>
3.容器屬性枚舉
容器的屬性上面已經(jīng)提到了一個(gè) flex-direction。其它的有：flex-wrap、flex-flow、align-items、justify-content、align-content。每一種屬性的功能在這里先進(jìn)行一個(gè)簡(jiǎn)短的概括，具體的使用在以后的章節(jié)中進(jìn)行討論。
- flex-direction: 指定了內(nèi)部元素是如何在子元素中布局的，定義了主軸方向?？梢越邮芩膫€(gè)值，在前面已經(jīng)提到。
- flex-wrap: 指定 flex 項(xiàng)是單行顯示還是多行顯示，如果指定多行，該屬性允許你指定項(xiàng)的堆疊方向（如：由左到右，或由右到左）。它有 no-wrap、wrap、wrap-reverse 三個(gè)值。
- flex-flow: 該屬性是 flex-direction 和 flex-flow 屬性的縮寫。如 flex-flow: row wrap ,相當(dāng)于 flex-direction: row flex-flow:wrap
- align-items: 定義 flex 項(xiàng)在交叉軸上的對(duì)齊。取值有 flex-start、flex-end、center、baseline、stretch ，默認(rèn)為 stretch。
- justify-content: 定義 flex 項(xiàng)在主軸上的對(duì)齊。取值有 flex-start(默認(rèn))、flex-end、center、space-between、sapce-end。
- align-content: 定義了多根軸線的對(duì)齊方式，該屬性對(duì)單行彈性盒子無效。取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch
4.flex 項(xiàng)屬性枚舉
flex 項(xiàng)同樣有六個(gè)屬性：order | flex-grow | flex-shrink | flex-basis | flex | align-self
- order: 定義 flex 項(xiàng)的排列順序，它的值是一個(gè)整數(shù)。由小到大，值越大排列越靠后。
- flex-grow: 定義項(xiàng)目如何放大，默認(rèn)為零，為零時(shí)不放大。
- flex-shrink: 指定了從每個(gè) flex 項(xiàng)中取出多少溢出量，以阻止它們溢出它們的容器。即指定元素的收縮規(guī)則（僅在默認(rèn)寬度大于容器寬度時(shí)有效）
- flex-basis: 指定了 flex 項(xiàng)在容器中初始小。
- flex 是前面三個(gè)屬性的縮寫，即 flex: flex-grow flex-shrink flex-basis。
- align-self: 指定一個(gè)或多個(gè) flex 項(xiàng)的對(duì)齊方式，覆蓋 align-items 指定的對(duì)齊方式。取值有 auto | flex-start | flex-end | center | baseline | stretch
5.屬性的應(yīng)用
彈性盒允許嵌套，即一個(gè)彈性盒內(nèi)部也可以有一個(gè)或多個(gè)彈性盒，這樣就能靈活實(shí)現(xiàn)各種各樣的布局。屬性的應(yīng)用就像卡牌游戲，面對(duì)不同的情況挑選不同的卡牌并按不同的順序進(jìn)行組合，y以此更好的達(dá)到自己的目的。
