認識彈性盒子flex
1、定義彈性佈局（父級上定義）display:flex;
如果說核心為webkit 的必須前面加上 -webkit-flex
2、設定了彈性佈局之後，子元素的css中的float, clear, vertical-align 這些屬性將失效。
3、可以將flex彈性佈局看成一個大盒子，也就是一個大容器，只要將它定義為 display:flex; 即它裡面所有的子元素均自動成為容器的成員，專業術語稱之為 專案
4、預設情況下，專案都是在容器裡面水平排列的，即按照主軸排列，且是順時針方向的。需（1,2,3）也就是x軸方向。（預設情況都是 flex-direction:row; ）
<div class="box">
<div class="boxone">第一個</div>
<div class="boxtwo">第二個</div>
<div class="boxthree">第三個</div>
</div>
css樣式：
.box{
width: 500px;
height:400px;
background: pink;
display: flex;
}
.boxone{
width: 100px;
height:200px;
background: red;
}
.boxtwo{
width: 100px;
height:200px;
background: orange;
}
.boxthree{
width: 100px;
height:200px;
background: yellow;
}
示例：
5、如果是需要它反著排列（3,2,1）排列，此時就需要用到 flex-direction:row-reverse;(和我們的全部 float:right; 是一樣的效果)
.box{
width: 500px;
height:400px;
background: pink;
display: flex;
flex-direction:row-reverse;
}
示例：
6、除了按照主軸方向排列，還有按照y軸方向排列的。
加上 flex-direction:column;
.box{
width: 500px;
height:400px;
background: pink;
display: flex;
flex-direction:column;
}
示例：
7、同理，y軸方向上倒序排列：flex-direction:column-reverse;
示例：
示例：
9、怎樣才能讓這些盒子本身的寬度起到作用，一行排不到，能夠自動的排第二排呢？這邊就需要用到彈性佈局中的換行。
flex-wrap:wrap;
.box{
width: 500px;
height:400px;
background: pink;
display: flex;
flex-wrap:wrap;
}
示例：
flex-wrap：nowrap; (不換行)
flex-wrap：wrap;（換行）
flex-wrap：wrap-reverse;（倒序換行）
倒序換行效果：
示例：
10、上面的換行預設情況是以x軸換行的，當然還有以y軸來換行的，也就是說，第一列排滿了之後，再排第二列。
此時就需要用到 flex-flow:row nowrap; (預設情況) flex-flow:column wrap; (y軸換行) flex-flow:column wrap-reverse;(倒序y軸換行)
y軸換行
.box{
width: 500px;
height:400px;
background: pink;
display: flex;
flex-flow:column wrap;
}
示例：
倒序y軸換行：
示例：
11、那在css中的位置關係，水平方向的左中右，垂直方向的上中下 ，用彈性佈局怎麼實現呢？這裡就給大家介紹彈性佈局怎樣來實現的。首先看水平反向：
水平方向佈局
justify-content:flex-start; 水平左
justify-content:center; 中
justify-content:flex-end; 水平右
justify-content:space-around; 居中顯示，兩邊也空有間隙
justify-content:space-between; 兩邊不留空隙
依次看下效果：
justify-content:flex-start; 水平左 （預設的）
示例：
justify-content:center; 中
示例：
justify-content:flex-end; 水平右
示例：
justify-content:space-around; 居中顯示，兩邊也空有間隙（且是均等的）
示例：
justify-content:space-between; 兩邊不留空隙（平均排列的）
示例：
垂直方向佈局
align-items:flex-start; 上
align-items:center; 中 （比起css樣式，垂直反向居中flex彈性佈局是個不錯的優勢）
align-items:flex-end; 下
這邊就演示一個垂直底部：
示例：
但是以上的垂直位置排版必須建立在一個前提條件下，即 單行 只有一行 。對於多行，即換行的，表現出來的樣子並不是我們需要看到的
如下：
<div class="box">
<div class="boxone">第一個</div>
<div class="boxtwo">第二個</div>
<div class="boxthree">第三個</div>
<div class="boxone">第四個</div>
<div class="boxtwo">第五個</div>
<div class="boxthree">第六個</div>
</div>
.box{
width: 500px;
height:800px;
background: pink;
display: flex;
flex-wrap:wrap;
align-content:center;
}
示例：
此時對於多行的，我們用另外一個屬性。即 align-content:center; 其他上 ，下 也是一樣的，如果是多行的話，即把items改成content 即可 其他幾個也是一樣的
示例：
12、order屬性
定義專案的排雷順序，order的值越小，排列在越前面。 這個屬性是寫在需要換順序的子集上的，也就是專案上的。預設為0；
<div class="box">
<div class="boxone">第一個</div>
<div class="boxtwo">第二個</div>
<div class="boxthree">第三個</div>
</div>
.box{
width: 500px;
height:600px;
background: pink;
display: flex;
flex-wrap:wrap;
align-items:center;
}
.boxone{
width: 100px;
height:200px;
background: red;
order:3;
}
.boxtwo{
width: 100px;
height:200px;
background: orange;
order:1;
}
.boxthree{
width: 100px;
height:200px;
background: yellow;
}
示例：