前言
其實彈性盒子這個知識，與其我來講，倒不如讓你們自己在這個網址看↓↓↓
因為我也是在這里看的。
1、什么是flex
Flex是Flexible Box的縮寫，意為“彈性布局”，也被開發者們稱為“彈性盒子”，這是一種為盒裝布局提供最大靈活性的布局方式，任何容器（比如div、p等）都可以指定為flex布局方式。
2、flex的概念
所謂的flex布局，我理解為就是用盒子裝液體。
我們通常的布局方式可以理解為往盒子里裝固體，固體所占空間就是固體本身的大小，如果固體的大小超過了盒子的大小，那么他也將完全的顯示出固體大小。
而彈性盒子可以將盒子內部的組件全部變為“液體”，當你為盒子里添加新組件的時候，他們會平均分配掉盒子內所有的空間（如果你沒有設置他們的配比），而如果你加入的組件太多，導致了超出了盒子，那么他就會像液體一樣溢出來。
將以下代碼運行一遍你能更好的理解我的意思
這是彈性布局↓↓↓
<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;
}
/*對于行內元素*/
span{
display: inline-flex;
}
/*webkit內核的瀏覽器*/
body{
display: -webkit-flex;
}
flex布局設置在父級元素身上，但它作用于子元素，也就是說如果你的父元素是空的，那么你將看不到任何變化。這和我們平時使用的屬性有很大的不同，這也是許多剛剛接觸彈性布局的人常犯的錯誤（別問我怎么知道的，說多都是淚）
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屬性決定了組件的換行方式，不過在一般情況下，默認屬性時不換行
body{
flex-wrap: nowrap | wrap | wrap-reverse;
}
上面三個值分別是不換行，向下換行，向上換行
3.2.3、flex-flow
flex-flow屬性其實就是上面兩個屬性的統稱，（類似于我們將所有的背景屬性統寫為background一樣），默認屬性是row nowrap
3.2.4、justify-content
justify-content屬性決定了主軸的對齊方式，比如你的主軸是row（即從左往右排列）那么這個屬性就相當于text-align屬性，而如果你的主軸是column（即從上到下排列），這個屬性就相當于vertical-align。
body{
justify-content: flex-start | flex-end | center | space-between | space-around;
}
上面五個值分別是靠主軸對齊，遠離主軸方向對齊，居中，兩端對齊（不包含邊距），等間距對齊（包含邊距）
3.2.5、align-items
align-items屬性決定了主軸交叉軸的對齊方式，也就是和justify-content旋轉90度的對齊方式。
body{
align-items: flex-start | flex-end | center | baseline | stretch;
}
上面五個值分別是靠交叉軸對齊，遠離交叉軸對齊，居中，基線對齊（基線的概念與vertical-align的基線相同），占滿交叉軸方向
3.2.6、align-content
align-content屬性決定了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
body {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
上面六個值分別是靠交叉軸對齊，遠離交叉軸對齊，居中，與交叉軸兩端對齊，與交叉軸等間距對齊，占滿整個交叉軸
4、flex的子元素屬性
除了可以在父元素上設置flex的屬性外，其實在flex盒子的子元素上也有可以設置的屬性
4.1、order
order屬性可以用來改變子元素在主軸方向的排列順序，數值越小，排列越靠前，但是他們在html的結構中不會變化
將下面代碼運行一遍，你會有更直觀的感受。（按F12鍵查看結構）
<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屬性定義了子元素的放大比例，也就是子元素在父元素中的占比，默認值為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屬性相反，他定義了子元素的縮小比例，默認值為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屬性定義了子元素在主軸上的長度，默認值為auto，你可以理解為他就是定義了width或height，當你設定了flex-basis屬性后你原本的width或height屬性就會失效。
4.5、flex
flex屬性就是grow、shrink、basis的縮寫，默認值為0 1 auto，后兩個屬性可選。
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
4.6 align-self
align-self屬性定義了子元素與其他元素不對齊的方式，默認值是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、結語
flex布局方式正在逐漸成為新流行的布局方式，我也是最近才接觸到的，如果我上面說的有什么不對，歡迎指出。
