大家好，我是IT修真院深圳分院第08期學員，一枚正直善良的web程序員。
今天給大家分享一下，修真院官網 CSS任務中可能會使用到的知識點：
FLEXBOX(彈性盒布局模型)以及適用場景?
1.背景介紹
FLEX布局是什么？
2009年，W3C提出了一種新的布局方案----Flex 布局，可以簡便、完整、響應式地實現(xiàn)各種頁面布局。 目前，它已經得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項功能。
2.知識剖析
一，怎么運用FLEX布局
flex布局非常靈活，任一容器都可以指定為flex布局。塊狀只需要display屬性規(guī)定為flex即可。 行內元素也可以指定為flex布局，將display屬性設置為inline-flex。 還有WebKit內核的瀏覽器需要加上-webkit前綴。 需要注意的是設置成為flex布局之后，子元素的float，clear，text-align，vertical-align就會失效。
二，基本概念
采用flex布局的元素就被稱為flex容器（flex contain），它的所有子元素稱為flex項目（flex item）。 容器默認存在兩根軸線，一根主軸（main axis）一根交叉軸（cross axis）。 項目默認沿主軸排列，單個項目占據的主軸空間叫main size，占據的交叉軸空間叫cross size.
三. FLEX-BOX容器屬性
flex-box(容器)和flex-item(項目)各自都有不同的屬性。通過對它們進行不同的設置來對整體布局進行調整以達到想要的效果。
flex-box容器的主要屬性有:
1.flex-direction 決定項目在主軸的排列方向。
2.flex-wrap 決定如果一條軸線排不下了，該如何換行。
3.flex-row 是flex-direction和wrap的簡寫形式，默認row nowrap。
4.justify-content 決定項目在主軸方向上如何對齊。
5.align-items 決定項目在交叉軸上如何對齊。
6.align-content 定義多根軸線如何對齊。
FLEX-DIRECTION
FLEX-DIRECTION屬性決定主軸的方向（即項目的排列方向）。
1.flex-direction: row;表示默認值，主軸在水平方向，從左到右。
2.flex-direction: row-reverse;主軸在水平方向，從右到左。
3.flex-direction: column;主軸在垂直方向上，從上到下。 這樣的話就會將原本在x軸從左向右排列的項目更改為從上到下排列。
4.flex-direction: column-reverse; 主軸在垂直方向上，同樣的，反轉一下，是從下到上。
FLEX-WRAP
默認情況下，項目都排在一條線（又稱"軸線"）上。FLEX-WRAP屬性定義，如果一條軸線排不下，如何換行。
1.flex-wrap: nowrap;也是這個屬性的默認值，表示不換行，項目等比例縮?。ㄈ绻麤]規(guī)定flex-shrink為0的情況下）。
2.flex-wrap: wrap;表示換行，且第一行在上方。
3.flex-wrap: wrap-reverse;這個時候，也會換行，但是第一行就要跑到下方去了。
FLEX-FLOW
FLEX-FLOW屬性是FLEX-DIRECTION屬性和FLEX-WRAP屬性的簡寫形式，默認值為ROW NOWRAP。
flex-flow: flex-direction || flex-wrap;
JUSTIFY-CONTENT
JUSTIFY-CONTENT屬性定義了項目在主軸上的對齊方式。
1.flex-start: 也是這個屬性的默認值，表示主軸起點對齊。
2.flex-end: 主軸終點對齊
3.center: 居中
4.space-between: 兩端對齊，項目之間的間隔都相等。
5.space-around: 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
ALIGN-ITEMS
ALIGN-ITEMS屬性定義項目在交叉軸上如何對齊。
1.flex-start: 也是這個屬性的默認值，表示交叉軸起點對齊。
2.flex-end: 交叉軸終點對齊
3.center: 居中
4.stretch（默認值）: 如果項目未設置高度或設為auto，將占滿整個容器的高度。
5.baseline: 項目的第一行文字的基線對齊。
ALIGN-CONTENT
ALIGN-CONTENT屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
1.flex-start: 與交叉軸的起點對齊。
2.flex-end: 交叉軸終點對齊。
3.center: 與交叉軸的中點對齊。
4.space-between: 與交叉軸兩端對齊，軸線之間的間隔平均分布。
5.space-around: 項目的第一行文字的基線對齊。
6.stretch(默認值): 軸線占滿整個交叉軸。
四. FLEX項目屬性
flex項目的屬性也有6個。項目的屬性有:
1.order 決定項目的排列順序，數值越小，排列越靠前。
2.flex-grow 決定項目的放大比例，默認值是0，也就是存在剩余空間，不放大。
3.flex-shrink 是也就是決定項目的縮小比例，默認是1，表示剩余空間不足時，等比縮小，如果需要不變，可以設置為0。
4.flex-basis 定義了在分配多余項目之前，項目占據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。它可以設為跟width或height屬性一樣的值（比如350px），則項目將占據固定空間。
5.flex 是以上三個的簡寫，默認0 1 auto，也就是不放大，不縮小，占據項目本來大小的主軸空間。該屬性有兩個快捷值: auto (1 1 auto) 和 none (0 0 auto)，這里也不過多贅述。
6.align-self屬性 默認auto，繼承flex容器，也就是父元素的align-items屬性，項目和algn-items一樣，只是決定單個item對交叉軸的對齊方式。
3.常見問題
display:flex可以復合使用嗎？
4.解決方案
答案是可以的，一個元素可以是一個display的子元素同時也是另外一個display的父元素。
5.代碼實戰(zhàn)
demo
6.拓展思考
FLEX布局的常用場景
垂直居中，處于中心，以及左中右三塊布局
7.參考文獻
提問：可以通過flex布局把一個內容靠左，一個居中么
是可以實現(xiàn)得
感謝大家觀看！
今天的分享就到這里啦，歡迎大家點贊、轉發(fā)、留言、拍磚~
