一刑然，為什么寫這篇文章
在很早之前就接觸display：flex布局寺擂，尤其是不考慮低版本瀏覽器兼容之后，就開始肆無忌憚的使用了泼掠。之前做pc端的時(shí)候怔软，要求兼容到ie8，也不會(huì)注意到它择镇。后來做移動(dòng)端挡逼，第一次看到display：flex，還是從一個(gè)實(shí)習(xí)生的代碼里看到腻豌，然后查了查資料家坎，原來是這么方便。
簡(jiǎn)單的使用及原理請(qǐng)查看阮一峰大神的講解吝梅。
二.基本使用
父元素
{
display:flex;
}
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
可以有6個(gè)屬性可以設(shè)置虱疏，具體不再細(xì)說。
子元素
{
flex:none | auto; /* default auto */
}
我主要想說的是子元素的flex屬性苏携，剛接觸時(shí)確實(shí)不好理解做瞪。因?yàn)槔斫饬诉@個(gè)就可以實(shí)現(xiàn)左固定右自適應(yīng)的這種布局，通常出現(xiàn)在列表顯示的時(shí)候右冻。網(wǎng)上還通常見到flex：1 |none|auto 的這種寫法穿扳，就是下面這幾個(gè)屬性在作祟。
每個(gè)子元素也稱為 “項(xiàng)目”国旷，屬性值有:
1、order //定義各個(gè)子元素的排列順序茫死，數(shù)值越小跪但，排列越靠前，默認(rèn)為0，可為負(fù)數(shù)
.item{
order:-1;/* 任意數(shù)字 */
}
2屡久、flex-grow //定義子元素的放大比例忆首，默認(rèn)為0（不放大），前提是父容器有空余空間
.item{
flex-grow: <number>; /* default 0 */
}
3被环、flex-shrink //如果所有項(xiàng)目的flex-shrink屬性都為1糙及，當(dāng)空間不足時(shí)，都將等比例縮小筛欢。如果一個(gè)項(xiàng)目的flex-shrink屬性為0浸锨，其他項(xiàng)目都為1，則空間不足時(shí)版姑，前者不縮小柱搜。
負(fù)值對(duì)該屬性無效。
.item{
flex-shrink: <number>; /* default 1 */
}
4剥险、flex-basis //在子元素分配空余空間前聪蘸，設(shè)定指定的子元素的空間大小，默認(rèn)auto（原值）
.item{
flex-basis: <length> | auto; /* default auto */
}
/* 可以設(shè)置60% 或者 200px */
5表制、flex //是flex-grow健爬、flex-shrink、flex-basis的組合么介，默認(rèn)值flex:0 1 auto;
.item{
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
/* 該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto) */
/* 建議優(yōu)先使用這個(gè)屬性娜遵，而不是單獨(dú)寫三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值 */
6夭拌、align-self //允許單個(gè)子元素與其他子元素不一樣的對(duì)齊方式魔熏，可以覆蓋父元素設(shè)定的align-items屬性。默認(rèn)值為auto鸽扁，表示繼承父元素的align-items屬性蒜绽，如果沒有父元素，則等同stretch（填充滿）桶现。
.item{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
我們通常用到的就是這個(gè)flex屬性躲雅，在布局的時(shí)候會(huì)很有用。
對(duì)于這個(gè)屬性骡和，最好是手動(dòng)敲一下相赁，嘗試一下各種值出現(xiàn)的效果。
三.圣杯布局
layout布局一直是css很重要的知識(shí)點(diǎn)慰于，在面試中也會(huì)經(jīng)常遇到钮科，這里就用flex做一個(gè)圣杯布局。
css
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
display: flex;
flex-direction:column;
}
.header,.footer{
flex: 0 0 80px;
background-color: #7dbcea;
}
.container{
flex: auto;
background-color: #145d9c;
display: flex;
}
.container .left,.container .right{
flex: 0 0 200px;
background-color: #3a90ce;
}
.container .main{
flex: auto;
background-color: #145d9c;
}
html
<div class="header"></div>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
