大家好，我是IT修真院鄭州分院第六期的學員王棟征峦，一枚正直、純潔消请、善良的前端程序員栏笆。
今天給大家分享一下，修真院官網CSS（職業(yè)）任務5臊泰，深度思考中的知識點——Flexbox（彈性盒布局模型）以及適用場景蛉加？
1.背景介紹
常用的web布局有哪些？
1.靜態(tài)布局
2.彈性布局
3.流式布局
4.自適應布局
5.響應式布局
flex布局是什么缸逃？
2009年针饥，W3C提出了一種新的布局方案----Flex 布局，可以簡便需频、完整丁眼、響應式地實現(xiàn)各種頁面布局。 目前贺辰，它已經得到了所有瀏覽器的支持户盯，這意味著婴削，現(xiàn)在就能很安全地使用這項功能涧偷。
一，怎么運用flex布局
flex布局非常靈活刷后，任一容器都可以指定為flex布局吃靠。塊狀只需要display屬性規(guī)定為flex即可硫眨。 行內元素也可以指定為flex布局，將display屬性設置為inline-flex巢块。 還有WebKit內核的瀏覽器需要加上-webkit前綴礁阁。 需要注意的是設置成為flex布局之后巧号，子元素的float，clear姥闭，vertical-align就會失效丹鸿。
二，基本概念
采用flex布局的元素就被稱為flex容器（flex contain）棚品，它的所有子元素稱為flex項目（flex item）靠欢。 容器默認存在兩根軸線，一根主軸（main axis）一根交叉軸（cross axis）铜跑。 項目默認沿主軸排列门怪，單個項目占據(jù)的主軸空間叫main size，占據(jù)的交叉軸空間叫cross size.
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;這個時候翘骂，也會換行壁熄，但是第一行就要跑到下方去了，畢竟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-item項目屬性flex項目的屬性也有6個亿柑。項目的屬性有:
1.order 決定項目的排列順序邢疙，數(shù)值越小，排列越靠前。
2.flex-grow 決定項目的放大比例疟游，默認值是0呼畸，也就是存在剩余空間，不放大颁虐。
3.flex-shrink 是也就是決定項目的縮小比例蛮原，默認是1，表示剩余空間不足時另绩，等比縮小儒陨，如果需要不變，可以設置為0笋籽。
4.flex-basis 定義了在分配多余項目之前蹦漠，項目占據(jù)的主軸空間。瀏覽器根據(jù)這個屬性车海，計算主軸是否有多余空間笛园。它的默認值為auto，即項目的本來大小侍芝。它可以設為跟width或height屬性一樣的值（比如350px）研铆，則項目將占據(jù)固定空間。
5.flex 是以上三個的簡寫州叠，默認0 1 auto棵红，也就是不放大，不縮小咧栗，占據(jù)項目本來大小的主軸空間逆甜。該屬性有兩個快捷值: 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)
用flex布局平斩，完成簡單的網格系統(tǒng)
這個是用flex做一個簡單的網格亚享，還有一個靈活應用flex布局，完成骰子的效果绘面，大家可以自己嘗試一下欺税。
6.擴展思考
flex布局的常用場景
垂直居中侈沪，處于中心，以及左中右三塊布局
7.參考文獻
8.更多討論
flex布局和bootstrap網格布局各有什么優(yōu)缺點晚凿？
bootstrap優(yōu)缺點：
1.bootstap最近發(fā)布了bootstrap4亭罪，擁有了box-flex布局等更新，緊跟最新的web技術的發(fā)展
2.比較成熟歼秽，在大量的項目中充分的使用和測試
3.擁有完善的文檔应役，使用起來更方便
4.有大量的組件樣式，接受定制
缺點：
1.如果有自己特殊的需求燥筷，就需要重新定制樣式箩祥，如果一個網站中有大量的非bootstrap“風格”的樣式存在，那么你就需要做大量的css重寫肆氓，因此也就失去了使用框架的意義袍祖。
2.會有兼容問題，雖然網上存在很多兼容IE的辦法做院，但需要引入其他文件盲泛，有些還不小，勢必導致加載速度變慢键耕，影響用戶體驗。
flex布局的優(yōu)點：很靈活柑营，方便易用屈雄。
缺點：對大型項目的支持不如bootstrap好，手機上兼容性有一定問題官套。
