Flex布局
對於我們平常遇到的問題的解決方法。
1.在父容器中的垂直居中。
2.使容器內的子項占據等量的空間（寬、高）。
3.使容器內的列等高排列。
在線查看Flex布局示例及其屬性使用，效果展現：
在線示例
下面是各個屬性的描述：
.box{
display:flex;
}
設置容器的display屬性為flex，如果是行內元素使用inline-flex.
flex-direction
定義子項如何排列。
.box{
flex-direction:row;
}
row:X軸排列，從左到右，
row-reverse:X軸排列，從右到左
column：Y軸排列，從上到下
column-reverse:Y軸排列，從下到上
flex-wrap
定義子項超出時，換行方式。
.box{
flex-wrap:wrap;
}
wrap:換行
nowarp:不換行
wrap-reverse：換行，反轉排列
flex-flow是flex-direction/flex-wrap的縮寫。
justify-content
定義子項橫向排列時的樣式。
.box{
justify-content:center;
}
flex-start：靠左
flex-end:靠右
center：居中
space-between：沿X軸均勻分配，兩邊不留空
space-around：沿X軸均勻分配，兩邊留空
align-items
定義子項縱向排列時的樣式。
.box{
align-items:center;
}
flex-start:靠上
flex-end:靠下
center：垂直居中 **問題一
baseline：按照子項中第一行文本位置為基准水平線
stretch：所有子項縱向占滿空間。 **問題三
子項的高度不能寫死，不然stretch無效。
align-content
有多行子項時的排列樣式（即 flex-wrap屬性必須是wrap）
.box{
align-content:center;
}
flex-start:靠上
flex-end:靠下
center：垂直居中
space-between：沿Y軸分配，上下邊不留空
space-around：沿Y軸均勻分配，上下邊留空
stretch：縱向鋪滿
子項只有一行時不生效。
子項item高度不能寫死，不然stretch不生效。
項目的屬性
order
定義子項的排列順序，默認0。數值越小越靠前
.box-item:nth-of-type(1){
order:-1;
}
.box-item:nth-of-type(3){
order:2;
}
flex-frow
定義項目的放大比列，默認0不放大。
.box-item{
flex-grow:1;
}
值一樣時平均分配空間。
值不一樣時按值比例分配。
flex-shrink
定義項目的縮小比列，默認1縮小。為0時不縮小。
.box-item:nth-of-type(2){
flex-shrink:0;
}
flex-basis
定義項目在占據多余空間時的分配。auto為原大小
.box-item:nth-of-type(3){
flex-basis:300px;
}
分配的大小超過主軸空間，按比列分配空間。
flex 是flex-grow/flex-shrink/flex-basis的縮寫。
align-self
與容器的align-item對應，定義子項自己的排列位置。默認auto
.box-item:nth-of-type(2){
align-self:flex-start;
}
.box-item:nth-of-type(3){
align-self:flex-end;
}
.box-item:nth-of-type(3){
align-self:center;
}
auto:默認
flex-start:靠上
flex-end:靠下
center:垂直居中
baseline：以及元素第一行文本為基准線
stretch:占滿縱向空間。
示例GitHub地址：
項目地址