flex布局
目錄
1.背景介紹
2.知識(shí)剖析
3.常見問(wèn)題
4.解決方案
5.編碼實(shí)戰(zhàn)
6.參考文獻(xiàn)
1.背景介紹
flex布局是什么
2009年酪穿，W3C 提出了一種新的方案----Flex 布局硼莽，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。目前，它已經(jīng)得到了所有瀏覽器的支持都伪，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能积担。
2.知識(shí)剖析
一陨晶，怎么運(yùn)用flex布局
flex布局非常靈活，任一容器都可以指定為flex布局帝璧。塊狀只需要display屬性規(guī)定為flex即可先誉。行內(nèi)元素也可以指定為flex布局，將display屬性設(shè)置為inline-flex的烁。還有WebKit內(nèi)核的瀏覽器需要加上-webkit前綴褐耳。需要注意的是設(shè)置成為flex布局之后，子元素的float渴庆，clear铃芦，vertical-align就會(huì)失效。
二襟雷，基本概念
采用flex布局的元素就被稱為flex容器（flex contain）刃滓，它的所有子元素稱為flex項(xiàng)目（flex item）。容器默認(rèn)存在兩根軸線耸弄，一根主軸（main axis）一根交叉軸（cross axis）咧虎。項(xiàng)目默認(rèn)沿主軸排列，單個(gè)項(xiàng)目占據(jù)的主軸空間叫main
? ? ? ? ? ? ? ? ? ? size计呈，占據(jù)的交叉軸空間叫cross size.
三. flex-box容器屬性
flex-box(容器)和flex-item(項(xiàng)目)各自都有不同的屬性砰诵。通過(guò)對(duì)它們進(jìn)行不同的設(shè)置來(lái)對(duì)整體布局進(jìn)行調(diào)整以達(dá)到想要的效果征唬。
flex-box容器的主要屬性有:
1.flex-direction 決定項(xiàng)目在主軸的排列方向。
2.flex-wrap 決定如果一條軸線排不下了茁彭，該如何換行总寒。
3.flex-flow 是flex-direction和wrap的簡(jiǎn)寫形式，默認(rèn)row nowrap尉间。
4.justify-content 決定項(xiàng)目在主軸方向上如何對(duì)齊偿乖。
5.align-items 決定項(xiàng)目在交叉軸上如何對(duì)齊击罪。
6.align-content 定義多根軸線如何對(duì)齊哲嘲。
flex-direction
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。
1.flex-direction: row;表示默認(rèn)值媳禁，主軸在水平方向眠副，從左到右。
2.flex-direction: row-reverse;主軸在水平方向竣稽，從右到左囱怕。
3.flex-direction: column;主軸在垂直方向上，從上到下毫别。這樣的話就會(huì)將原本在x軸從左向右排列的項(xiàng)目更改為從上到下排列娃弓。
4.flex-direction: column-reverse; 主軸在垂直方向上，同樣的岛宦，反轉(zhuǎn)一下台丛，是從下到上。
flex-wrap
默認(rèn)情況下砾肺，項(xiàng)目都排在一條線（又稱"軸線"）上挽霉。flex-wrap屬性定義，如果一條軸線排不下变汪，如何換行侠坎。
1.flex-wrap: nowrap;也是這個(gè)屬性的默認(rèn)值，表示不換行裙盾，項(xiàng)目等比例縮惺敌亍（如果沒(méi)規(guī)定flex-shrink為0的情況下）。
2.flex-wrap: wrap;表示換行番官，且第一行在上方童芹。
3.flex-wrap: wrap-reverse;這個(gè)時(shí)候，也會(huì)換行鲤拿，但是第一行就要跑到下方去了假褪，畢竟reverse.
flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap近顷。
flex-flow: flex-direction || flex-wrap;
justify-content
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式生音。
1.flex-start: 也是這個(gè)屬性的默認(rèn)值宁否，表示主軸起點(diǎn)對(duì)齊。
2.flex-end: 主軸終點(diǎn)對(duì)齊
3.center: 居中
4.space-between: 兩端對(duì)齊缀遍，項(xiàng)目之間的間隔都相等慕匠。
5.space-around: 每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以域醇，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍台谊。
align-items
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
1.flex-start: 也是這個(gè)屬性的默認(rèn)值譬挚，表示交叉軸起點(diǎn)對(duì)齊锅铅。
2.flex-end: 交叉軸終點(diǎn)對(duì)齊
3.center: 居中
4.stretch（默認(rèn)值）: 如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度减宣。
5.baseline: 項(xiàng)目的第一行文字的基線對(duì)齊盐须。
align-content
align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線漆腌，該屬性不起作用贼邓。
1.flex-start: 與交叉軸的起點(diǎn)對(duì)齊。闷尿。
2.flex-end: 交叉軸終點(diǎn)對(duì)齊
3.center: 與交叉軸的中點(diǎn)對(duì)齊塑径。
4.space-between: 與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布填具。
5.space-around: 項(xiàng)目的第一行文字的基線對(duì)齊统舀。
6.stretch(默認(rèn)值): 軸線占滿整個(gè)交叉軸。
四. flex-item項(xiàng)目屬性
flex項(xiàng)目的屬性也有6個(gè)灌旧。項(xiàng)目的屬性有:
1.order 決定項(xiàng)目的排列順序绑咱，數(shù)值越小，排列越靠前枢泰。
2.flex-grow 決定項(xiàng)目的放大比例描融，默認(rèn)值是0，也就是存在剩余空間衡蚂，不放大窿克。
3.flex-shrink 是也就是決定項(xiàng)目的縮小比例，默認(rèn)是1毛甲，表示剩余空間不足時(shí)年叮，等比縮小，如果需要不變玻募，可以設(shè)置為0只损。
4.flex-basis 定義了在分配多余項(xiàng)目之前，項(xiàng)目占據(jù)的主軸空間。瀏覽器根據(jù)這個(gè)屬性跃惫，計(jì)算主軸是否有多余空間叮叹。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小爆存。它可以設(shè)為跟width或height屬性一樣的值（比如350px）蛉顽，則項(xiàng)目將占據(jù)固定空間。
5.flex 是以上三個(gè)的簡(jiǎn)寫先较，默認(rèn)0 1 auto携冤，也就是不放大，會(huì)縮小闲勺，占據(jù)項(xiàng)目本來(lái)大小的主軸空間曾棕。該屬性有兩個(gè)快捷值: auto (1 1 auto) 和 none (0 0 auto)，這里也不過(guò)多贅述霉翔。
6.align-self屬性 默認(rèn)auto睁蕾，繼承flex容器苞笨，也就是父元素的align-items屬性债朵，項(xiàng)目和algn-items一樣，只是決定單個(gè)item對(duì)交叉軸的對(duì)齊方式瀑凝。
3.常見問(wèn)題
4.解決方案
5.編碼實(shí)戰(zhàn)
用flex布局序芦，完成骰子幾個(gè)面，從一到六粤咪。
效果如下
靈活應(yīng)用了flex布局中的屬性谚中，完成骰子九宮格的效果，大家可以嘗試一下寥枝。
6.參考文獻(xiàn)
flexFlex 布局教程: 語(yǔ)法篇--阮一峰的個(gè)人博客
鳴謝
感謝大家觀看
今天的分享就到這里啦宪塔，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)囊拜、留言某筐、拍磚~
技能樹.IT修真院???
? “我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開始冠跷，找個(gè)師兄南誊，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏蜜托，學(xué)習(xí)的路上不再迷贸簦”。
? ?這里是技能樹.IT修真院橄务，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線幔托，學(xué)習(xí)透明化，成長(zhǎng)可見化蜂挪，師兄1對(duì)1免費(fèi)指導(dǎo)重挑。
? ?快來(lái)與我一起學(xué)習(xí)吧~http://www.jnshu.com/login/1/21109035
