前言
其實彈性盒子這個知識观游，與其我來講匈织，倒不如讓你們自己在這個網(wǎng)址看↓↓↓
因為我也是在這里看的。
1蜜托、什么是flex
Flex是Flexible Box的縮寫，意為“彈性布局”，也被開發(fā)者們稱為“彈性盒子”四苇，這是一種為盒裝布局提供最大靈活性的布局方式，任何容器（比如div方咆、p等）都可以指定為flex布局方式月腋。
2、flex的概念
所謂的flex布局瓣赂，我理解為就是用盒子裝液體榆骚。
我們通常的布局方式可以理解為往盒子里裝固體，固體所占空間就是固體本身的大小煌集，如果固體的大小超過了盒子的大小妓肢，那么他也將完全的顯示出固體大小。
而彈性盒子可以將盒子內(nèi)部的組件全部變?yōu)椤耙后w”苫纤，當(dāng)你為盒子里添加新組件的時候碉钠，他們會平均分配掉盒子內(nèi)所有的空間（如果你沒有設(shè)置他們的配比），而如果你加入的組件太多卷拘，導(dǎo)致了超出了盒子喊废，那么他就會像液體一樣溢出來。
將以下代碼運行一遍你能更好的理解我的意思
這是彈性布局↓↓↓
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
display: flex;
width: 200px;
}
div{
width: 1300px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
這是通常布局↓↓↓
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
display: block;
width: 200px;
}
div{
width: 1300px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
3栗弟、flex的使用方式
3.1基本使用
前面說過污筷，在任意容器中都可以使用flex布局
/*對于塊級元素*/
body{
display: flex;
}
/*對于行內(nèi)元素*/
span{
display: inline-flex;
}
/*webkit內(nèi)核的瀏覽器*/
body{
display: -webkit-flex;
}
flex布局設(shè)置在父級元素身上，但它作用于子元素乍赫，也就是說如果你的父元素是空的瓣蛀，那么你將看不到任何變化陆蟆。這和我們平時使用的屬性有很大的不同，這也是許多剛剛接觸彈性布局的人常犯的錯誤（別問我怎么知道的揪惦，說多都是淚）
3.2遍搞、常用屬性
在flex布局中，我們常用的屬性有六個器腋，分別是
1溪猿、flex-direction
2、flex-wrap
3纫塌、flex-flow
4诊县、justify-content
5、align-items
6措左、align-content
下面我來一一介紹這些屬性依痊。
3.2.1、flex-direction
flex-direction屬性決定主軸的方向怎披，即決定了組件的排列方式胸嘁，是從左往右排，還是從右往左排凉逛，又或是從上往下排性宏，也可以從下往上排。
body {
flex-direction: row | row-reverse | column | column-reverse;
}
上面四個值分別是從左往右状飞，從右往左毫胜，從上到下，從下到上
3.2.2诬辈、flex-wrap
flex-wrap屬性決定了組件的換行方式酵使，不過在一般情況下，默認(rèn)屬性時不換行
body{
flex-wrap: nowrap | wrap | wrap-reverse;
}
上面三個值分別是不換行焙糟，向下?lián)Q行口渔，向上換行
3.2.3、flex-flow
flex-flow屬性其實就是上面兩個屬性的統(tǒng)稱酬荞，（類似于我們將所有的背景屬性統(tǒng)寫為background一樣）搓劫，默認(rèn)屬性是row nowrap
3.2.4、justify-content
justify-content屬性決定了主軸的對齊方式混巧，比如你的主軸是row（即從左往右排列）那么這個屬性就相當(dāng)于text-align屬性叙赚，而如果你的主軸是column（即從上到下排列）晰绎，這個屬性就相當(dāng)于vertical-align。
body{
justify-content: flex-start | flex-end | center | space-between | space-around;
}
上面五個值分別是靠主軸對齊市怎，遠(yuǎn)離主軸方向?qū)R陨亡，居中傍衡，兩端對齊（不包含邊距）深员，等間距對齊（包含邊距）
3.2.5、align-items
align-items屬性決定了主軸交叉軸的對齊方式蛙埂，也就是和justify-content旋轉(zhuǎn)90度的對齊方式倦畅。
body{
align-items: flex-start | flex-end | center | baseline | stretch;
}
上面五個值分別是靠交叉軸對齊，遠(yuǎn)離交叉軸對齊绣的，居中叠赐，基線對齊（基線的概念與vertical-align的基線相同），占滿交叉軸方向
3.2.6屡江、align-content
align-content屬性決定了多根軸線的對齊方式芭概。如果項目只有一根軸線，該屬性不起作用惩嘉。
body {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
上面六個值分別是靠交叉軸對齊罢洲，遠(yuǎn)離交叉軸對齊，居中文黎，與交叉軸兩端對齊惹苗，與交叉軸等間距對齊，占滿整個交叉軸
4耸峭、flex的子元素屬性
除了可以在父元素上設(shè)置flex的屬性外桩蓉，其實在flex盒子的子元素上也有可以設(shè)置的屬性
4.1、order
order屬性可以用來改變子元素在主軸方向的排列順序抓艳，數(shù)值越小触机，排列越靠前，但是他們在html的結(jié)構(gòu)中不會變化
將下面代碼運行一遍玷或，你會有更直觀的感受儡首。（按F12鍵查看結(jié)構(gòu)）
<style type="text/css">
body{
display: flex;
}
div:nth-of-type(1){
background: red;
width: 100px;
height: 100px;
order: 2;
}
div:nth-of-type(2){
background: blue;
width: 100px;
height: 100px;
order: 3;
}
div:nth-of-type(3){
background: green;
width: 100px;
height: 100px;
order: 1;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
</body>
4.2、flex-grow
flex-grow屬性定義了子元素的放大比例偏友，也就是子元素在父元素中的占比蔬胯，默認(rèn)值為0，即如果存在剩余空間也不放大位他。
運行下面代碼幫助理解
<style type="text/css">
body{
display: flex;
width: 1000px;
}
div:nth-of-type(1){
background: red;
width: 100px;
height: 100px;
flex-grow: 2;
}
div:nth-of-type(2){
background: blue;
width: 100px;
height: 100px;
flex-grow: 1;
}
div:nth-of-type(3){
background: green;
width: 100px;
height: 100px;
flex-grow: 1;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
</body>
4.3氛濒、flex-shrink
flex-shrink屬性和flex-grow屬性相反，他定義了子元素的縮小比例鹅髓，默認(rèn)值為1舞竿，即如果空間不足，所有子元素等比例縮小
運行下面代碼有助于理解
<style type="text/css">
body{
display: flex;
width: 100px;
}
div:nth-of-type(1){
background: red;
width: 100px;
height: 100px;
flex-shrink: 1;
}
div:nth-of-type(2){
background: blue;
width: 100px;
height: 100px;
flex-shrink: 1;
}
div:nth-of-type(3){
background: green;
width: 100px;
height: 100px;
flex-shrink: 1;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
</body>
4.4窿冯、flex-basis
flex-basis屬性定義了子元素在主軸上的長度骗奖，默認(rèn)值為auto，你可以理解為他就是定義了width或height，當(dāng)你設(shè)定了flex-basis屬性后你原本的width或height屬性就會失效执桌。
4.5鄙皇、flex
flex屬性就是grow、shrink仰挣、basis的縮寫伴逸，默認(rèn)值為0 1 auto，后兩個屬性可選膘壶。
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)错蝴。
建議優(yōu)先使用這個屬性，而不是單獨寫三個分離的屬性香椎，因為瀏覽器會推算相關(guān)值漱竖。
4.6 align-self
align-self屬性定義了子元素與其他元素不對齊的方式，默認(rèn)值是auto畜伐，即繼承了父元素align-items屬性馍惹，如果沒有父元素，則等同于stretch玛界。
運行下面代碼幫助理解
<style type="text/css">
body{
display: flex;
width: 1000px;
height: 500px;
}
div:nth-of-type(1){
background: red;
width: 100px;
height: 100px;
align-self: flex-end;
}
div:nth-of-type(2){
background: blue;
width: 100px;
height: 100px;
}
div:nth-of-type(3){
background: green;
width: 100px;
height: 100px;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
</body>
5万矾、結(jié)語
flex布局方式正在逐漸成為新流行的布局方式，我也是最近才接觸到的慎框，如果我上面說的有什么不對良狈，歡迎指出。
