flex布局
.box{
display: -webkit-flex; /* Safari */
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
/*
row（默認值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向陵吸，起點在右端。
column：主軸為垂直方向介牙，起點在上沿壮虫。
column-reverse：主軸為垂直方向，起點在下沿耻瑟。
*/
flex-wrap: nowrap | wrap | wrap-reverse;
/*
nowrap（默認）：不換行
wrap：換行旨指，第一行在上方
wrap-reverse：換行赏酥，第一行在下方
*/
flex-flow: <flex-direction> || <flex-wrap>;
/*flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap谆构。*/
justify-content: flex-start | flex-end | center | space-between | space-around;
/*
flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊裸扶，項目之間的間隔都相等。
space-around：每個項目兩側(cè)的間隔相等搬素。所以呵晨，項目之間的間隔比項目與邊框的間隔大一倍。
*/
align-items: flex-start | flex-end | center | baseline | stretch;
/*
flex-start：交叉軸的起點對齊熬尺。
flex-end：交叉軸的終點對齊摸屠。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊粱哼。
stretch（默認值）：如果項目未設(shè)置高度或設(shè)為auto季二，將占滿整個容器的高度。
*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/*
flex-start：與交叉軸的起點對齊揭措。
flex-end：與交叉軸的終點對齊胯舷。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊绊含，軸線之間的間隔平均分布桑嘶。
space-around：每根軸線兩側(cè)的間隔都相等。所以躬充，軸線之間的間隔比軸線與邊框的間隔大一倍逃顶。
stretch（默認值）：軸線占滿整個交叉軸。
*/
/*
order:屬性定義項目的排列順序充甚。數(shù)值越小以政，排列越靠前，默認為0津坑。
flex-grow:屬性定義項目的放大比例妙蔗，默認為0，即如果存在剩余空間疆瑰，也不放大眉反。
flex-shrink:屬性定義了項目的縮小比例，默認為1穆役，即如果空間不足寸五，該項目將縮小。
flex-basis:屬性定義了在分配多余空間之前耿币，項目占據(jù)的主軸空間（main size）梳杏。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認值為auto十性，即項目的本來大小叛溢。
flex:屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto劲适。后兩個屬性可選楷掉。
align-self:屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性霞势。默認值為auto烹植，表示繼承父元素的align-items屬性，如果沒有父元素愕贡，則等同于stretch草雕。
*/
}
注意：設(shè)為Flex布局以后，子元素的float固以、clear和vertical-align屬性將失效墩虹。
經(jīng)典案例——上下固定 中間滾動條
<style>
.wrap{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
width:100%;
height:100%;
}
.header,.footer{
height:40px;
line-height:40px;
text-align: center;
background-color:#D8D8D8;
text-align:center;
flex-shrink: 0;
}
.main{
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
width:100%;
padding:10px;
box-sizing: border-box;
overflow: auto;
}
.contain{
height: 5000px;
}
</style>
<body>
<div class="wrap">
<div class="header"></div>
<div class="main">
<div class="contain"></div>
</div>
<div class="footer"></div>
</div>
</body>
經(jīng)典案例——圣杯布局
要實現(xiàn)上下固定高度，左右兩邊固定寬度嘴纺，中間內(nèi)容自適應(yīng)的布局败晴。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex圣杯布局</title>
<style>
*{
padding: 0;
margin: 0;
}
.HolyGrail{
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,
footer{
height: 50px;
background: #f00;
}
.HolyGrail-body{
display: flex;
flex: 1;
}
.HolyGrail-content{
/* 自動填充剩余部分 */
flex: 1;
background: #0f0;
}
.HolyGrail-nav,
.HolyGrail-ads{
/* 兩個邊欄的寬度設(shè)為12em */
flex: 0 0 12em;
}
.HolyGrail-ads{
background: #ffff00;
}
.HolyGrail-nav{
order: -1;
background: #0ff;
}
</style>
</head>
<body>
<div class="HolyGrail">
<header>header</header>
<div class="HolyGrail-body">
<nav class="HolyGrail-nav">left</nav>
<main class="HolyGrail-content">center</main>
<aside class="HolyGrail-ads">right</aside>
</div>
<footer>footer</footer>
</div>
</body>
</html>
圣杯布局效果圖
