flex 之前主要使用：
normal flowfloat + clearposition relative + absolutedisplay inline-block負(fù) margin
flex 布局
- 塊級(jí)布局側(cè)重垂直方向日丹、行內(nèi)布局側(cè)重水平方向，
flex布局是與方向無關(guān)的 -
flex布局可以實(shí)現(xiàn)空間自動(dòng)分配蚯嫌、自動(dòng)對(duì)齊（flexible：彈性哲虾、靈活） -
flex適用簡(jiǎn)單的線性布局，更復(fù)雜的布局要交給grid布局
flex container
| 屬性 | 解釋 |
|---|---|
flex-direction |
方向 |
flex-wrap |
換行 |
flex-flow |
上面兩個(gè)的簡(jiǎn)寫 |
justify-content |
主軸方向?qū)R方式 |
align-items |
側(cè)軸對(duì)齊方式 |
align-content |
多行/列內(nèi)容對(duì)齊方式（用的較少） |
1. flex-direction:
規(guī)定靈活項(xiàng)目的方向
| 值 | 描述 |
|---|---|
row |
默認(rèn)值齐帚。靈活的項(xiàng)目將水平顯示妒牙，正如一個(gè)行一樣 |
row-reverse |
與 row 相同，但是以相反的順序 |
column |
靈活的項(xiàng)目將垂直顯示对妄，正如一個(gè)列一樣 |
column-reverse |
與 column 相同湘今，但是以相反的順序 |
initial |
設(shè)置該屬性為它的默認(rèn)值 |
inherit |
從父元素繼承該屬性 |
2. flex-wrap:
規(guī)定flex容器是單行或者多行，同時(shí)橫軸的方向決定了新行堆疊的方向
| 值 | 描述 |
|---|---|
nowrap |
默認(rèn)值剪菱，規(guī)定靈活的項(xiàng)目不拆行或不拆列 |
wrap |
規(guī)定靈活的項(xiàng)目在必要的時(shí)候拆行或拆列 |
wrap-reverse |
規(guī)定靈活的項(xiàng)目在必要的時(shí)候拆行或拆列摩瞎，但是以相反的順序 |
initial |
設(shè)置該屬性為它的默認(rèn)值 |
inherit |
從父元素繼承該屬性 |
3. flex-flow:
一個(gè)簡(jiǎn)寫的方式
- 第一個(gè)值為：
flex-direction - 第二個(gè)值為：
flex-wrap
4. justify-content
主軸方向?qū)R方式
- 當(dāng)
flex-direction: row;時(shí)，主軸為X方向 - 當(dāng)
flex-direction: column;時(shí)孝常，主軸為Y方向
| 值 | 描述 |
|---|---|
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)目與邊框的間隔大一倍 |
5. align-items:
側(cè)軸對(duì)齊方式
| 值 | 描述 |
|---|---|
stretch |
默認(rèn)值，如果項(xiàng)目未設(shè)置高度或設(shè)為auto喜颁，將占滿整個(gè)容器的高度 |
flex-start |
側(cè)軸的起點(diǎn)對(duì)齊 |
flex-end |
側(cè)軸的終點(diǎn)對(duì)齊 |
center |
側(cè)軸的中點(diǎn)對(duì)齊 |
baseline |
項(xiàng)目的第一行文字的基線對(duì)齊 |
6. align-content
多行/列內(nèi)容對(duì)齊方式（用的較少）
| 值 | 描述 |
|---|---|
stretch |
默認(rèn)值稠氮，軸線占滿整個(gè)側(cè)軸 |
flex-start |
與側(cè)軸的起點(diǎn)對(duì)齊 |
flex-end |
與側(cè)軸的終點(diǎn)對(duì)齊 |
center |
與側(cè)軸的中點(diǎn)對(duì)齊 |
space-between |
與側(cè)軸兩端對(duì)齊，軸線之間的間隔平均分布 |
space-around |
每根軸線兩側(cè)的間隔都相等半开。所以隔披，軸線之間的間隔比軸線與邊框的間隔大一倍 |
flex item
| 屬性 | 描述 |
|---|---|
| flex-grow | 增長(zhǎng)比例（空間過多時(shí)） |
| flex-shrink | 縮小比例（空間不夠時(shí)） |
| flex-basis | 默認(rèn)大小（一般不用） |
| flex | 上面三個(gè)的縮寫 |
| order | 順序（代替雙飛翼） |
| align-self | 自身的對(duì)齊方式 |
1. flex-grow
flex-grow屬性dinginess項(xiàng)目的放大比例寂拆，默認(rèn)為0奢米，即如果存在剩余空間抓韩，也不放大
如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）鬓长。如果一個(gè)項(xiàng)目的flex-grow屬性為2谒拴，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍
http://js.jirengu.com/qunaf/1/edit?css,output
2. flex-shrink
flex-shrink屬性定義了項(xiàng)目的縮小比例痢士，默認(rèn)為1彪薛，即若谷空間不足，該項(xiàng)目將縮小
如果所有項(xiàng)目的flex-shrink屬性都為1怠蹂，當(dāng)空間不足時(shí)善延，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0城侧，其他項(xiàng)目都為1易遣，則空間不足時(shí)，前者不縮小
負(fù)值對(duì)該屬性無效
http://js.jirengu.com/qunaf/2/edit?css,output
3. flex-basis
flex-basis屬性定義了在分配多余空間之前嫌佑，項(xiàng)目占據(jù)的主軸空間（main size）豆茫。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主奏是否多余空間屋摇。它的默認(rèn)值為auto揩魂，即項(xiàng)目的本來大小
它可以設(shè)為跟width或height屬性一樣的值（比如200px），則項(xiàng)目占據(jù)固定空間
http://js.jirengu.com/qunaf/3/edit?css,output
4. flex
flex屬性是flex-grow炮温，flex-shrink火脉，和flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto柒啤。后面兩個(gè)屬性可選
該屬性有兩個(gè)快捷值：auto （1 1 auto）和 none（0 0 auto）
建議優(yōu)先使用這個(gè)屬性倦挂，而不是單獨(dú)寫三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值
5. order
order屬性定義項(xiàng)目的排列順序担巩。數(shù)值越小方援，排列越靠前，默認(rèn)為0
用css改變內(nèi)容的排序
http://js.jirengu.com/qunaf/4/edit?css,output
6. align-self
align-self屬性允許單個(gè)項(xiàng)目有其他項(xiàng)目不一樣的對(duì)齊方式涛癌，可覆蓋align-items屬性犯戏。默認(rèn)值為auto，表示繼承父元素的align-items屬性拳话，如果沒有父元素先匪，則等同于stretch
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch
}
該屬性可能取 6 個(gè)值，除了auto假颇，其他都與align-items屬性完全一致
http://js.jirengu.com/qunaf/5/edit?css,output
簡(jiǎn)單使用
手機(jī)頁(yè)面布局（topbar + main + tabs）
http://js.jirengu.com/muxim/1/edit?html,css,output產(chǎn)品列表（ul > li*9）
http://js.jirengu.com/qemah/1/edit?css,outputPC 頁(yè)面布局
http://js.jirengu.com/cezal/1/edit?css,output
