關(guān)于flex的基本概念啥的就不介紹了，直接正題隘梨。
基本布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex box</title>
<style media="screen">
* {-webkit-box-sizing: border-box; box-sizing: border-box;}
.container div { background-color: red; border: 1px solid #333; }
.div1 {width: 70px; height: 70px;}
.div2 {width: 50px; height: 50px;}
.div3 {width: 60px; height: 60px;}
.container {width: 299px; height: 300px; background-color: #f0f0f0;}
</style>
</head>
<body>
<div class="container">
<div class="div1">盒1</div>
<div class="div2">盒2</div>
<div class="div3">盒3</div>
</div>
</body>
</html>
寫在父容器上的屬性
1蚀腿、flex-direction（排列）
.container {
flex-direction: row ; /*水平排列（同float：left嘴瓤；）*/
row-reverse ; /*水平排列（同float：right；）*/
column ; /*垂直排列-頂部開始*/
column-reverse; /*垂直排列-底部開始*/
}
2莉钙、flex-wrap（換行）
.container{
flex-wrap: nowrap; /*不換行*/
wrap; /*換行纱注，第一行在頂部*/
wrap-reverse; /*換行，第一行在底部*/
}
3胆胰、flex-flow
.container{
flex-flow: <flex-direction> <flex-wrap>; /*怎么排列(row/column) 怎么換行(nowrap/wrap)*/
}
4狞贱、justify-content
.container{
justify-content: flex-start; /*左對齊（默認值） 類似flex-direction: row;*/
flex-end; /*右對齊 類似flex-direction: row-reverse;*/
center; /*居中*/
space-between; /*兩端對齊，項目之間的間隔都相等*/
space-around; /*每個項目兩側(cè)的間隔相等蜀涨。所以瞎嬉，項目之間的間隔比項目與邊框的間隔大一倍*/
space-evenly; /*每個項目間隔相等蝎毡。所以，項目之間的間隔與邊框的間隔一樣大*/
}
5氧枣、align-items
.container{
align-items: flex-start; /*頂對齊*/
flex-end; /*底對齊*/
center; /*居中對齊*/
baseline; /*項目的第一行文字的基線對齊*/
stretch; /*（默認值）：如果項目未設(shè)置高度或設(shè)為auto沐兵，將占滿整個容器的高度。案例中沒有給盒1和盒3高度*/
}
6便监、align-content
這個屬性是基于兩條軸線的 如果我的元素還是三個 扎谎，沒有出現(xiàn)換行的時候，此屬性是沒有效果的烧董。增加三個盒子毁靶，然后給他們增加一個屬性 flex-wrap: wrap就可以了。
.container{
align-content: flex-start; /*與交叉軸的起點對齊*/
flex-end; /*與交叉軸的終點對齊*/
center; /*與交叉軸的中點對齊*/
space-between; /*與交叉軸兩端對齊逊移，軸線之間的間隔平均分布*/
space-around; /*每根軸線兩側(cè)的間隔都相等预吆。所以，軸線之間的間隔比軸線與邊框的間隔大一倍胳泉。*/
stretch; /*（（默認值）：軸線占滿整個交叉軸*/
}
寫在子元素上的屬性
1拐叉、order
默認值是零 ，越小的數(shù)字排的學(xué)靠前扇商；
.div2{
order: 1; /*在這里給div2的子元素增加了這個屬性凤瘦，它就會比其他的排列都靠后*/
}
在這里給div2的子元素增加了這個屬性，它就會比其他的排列都靠后案铺；盒5和盒2是都是 div2廷粒；
2、flex-grow
定義子元素的放大比例红且，默認為0，意思就是即使存在剩余空間涤姊，也不會放大暇番；
.div2{
flex-grow: 1; /*拉伸剩余空間*/
}
如果所有子元素的
flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）思喊。如果一個子元素的
flex-grow屬性為2壁酬，其他子元素都為1，則前者占據(jù)的剩余空間將比其他子元素多一倍恨课。
3舆乔、flex-shrink
flex-shrink屬性定義了子元素的縮小比例，默認為1剂公，即如果空間不足希俩，該子元素將縮小。
.container{
width: 150px; /*設(shè)置父元素的寬度為150px纲辽；*/
}
.div2{
flex-shinrk: 0; /*默認值為1颜武，這里改成0璃搜，表示空間不足也不能壓縮div2 ，盒1和盒3將會被壓縮*/
}
4鳞上、flex-basis
flex-basis屬性定義了在分配多余空間之前这吻，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性篙议，計算主軸是否有多余空間唾糯。它的默認值為auto，即項目的本來大小鬼贱。
它可以設(shè)為跟width或height屬性一樣的值（比如350px）移怯，則項目將占據(jù)固定空間。
.div2{
flex-basis: 100px; /*當父元素存在多于空間吩愧，div2要占據(jù)100px空間芋酌；空間不足也按照100px空間來壓縮*/
}
5、flex
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫雁佳，默認值為0 1 auto脐帝。后兩個屬性可選。
.div2{
flex: 0 1 100px; /*即flex-grow: 0; flex-shrink: 1; flex-basis: 100px;*/
}
flex-grow和flex-shrink值為默認值糖权，顯示效果等同于basis: 100px;
6堵腹、
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性星澳。默認值為auto疚顷，表示繼承父元素的align-items屬性，如果沒有父元素禁偎，則等同于stretch腿堤。
.div2{
align-self: auto; /*默認值*/
flex-start; /**/
flex-end; /**/
center; /**/
baseline; /*需要兩個以上元素有此屬性才有用*/
stretch; /*給盒2的去掉*/
}
以上為flex的基礎(chǔ)知識，具體應(yīng)用還要上手練習(xí)才能體會如暖。
本文參考 Flex 布局教程：語法篇
