Flex佈局
今天在學習css的時候，學到了一個新的佈局方式:Flex佈局（彈性盒佈局）。本人認爲挺重要的，首寫博客來鞏固一下自己今天所學的有關Flex佈局的知識，並與大家分享，內容如有錯誤，歡迎大家來給我指點一下。
> 本章節使用的基礎代碼(開啓flex之前)
<style>
.wrapper{
width: 800px;
border: red solid 5px;
}
.box1,.box2,.box3{
width: 100px;
height: 100px;
}
.box1{
background-color: royalblue;
}
.box2{
background-color:yellow;
}
.box3{
background-color: salmon;
}
</style>
<body>
<div class="wrapper">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
Flex簡介
Flex佈局又稱彈性盒佈局，是css佈局中的一個手段。主要是代替浮動來完成頁面佈局。
在沒有Flex佈局的時候，css主要是通過Float來水平佈局，但是因爲Float是爲了文字排版纔出現的一種技術，因此會有很多問題。例如：高度塌陷的問題。
可以這樣理解，Flex佈局之所以被稱爲彈性盒佈局是因爲flex可以使元素具有彈性，可隨頁面大小的變化而變化。
Flex有一個缺點就是瀏覽器的兼容性不夠好。例如對於IE是失效的
彈性容器
要使用Flex佈局，必須將元素設置爲彈性容器。
/* 開啓彈性佈局的兩種方式 */
display: flex; /*設置爲塊級的彈性容器*/
display: inline-flex; /*設置爲行內的彈性容器*/
/*兩者的主要區別在於在彈性容器是否會佔據頁面一行
設置爲塊級的彈性容器後，彈性容器外的元素會在其的下一行出現。
設置爲行內的彈性容器且彈性容器並未佔滿一行，彈性容器外的元素會在其的後面出現*/
對.wrapper設置爲彈性容器後效果如下
可見其水平排列
彈性元素
彈性容器的子元素就是彈性元素。注意：子孫元素不行。
一個元素既可以是彈性容器也可以是彈性元素。
<div class="wrapper">/*在給wrapper設置彈性容器*/
<div class="box1"> /*box1,box2,box3即爲彈性元素*/
<div class="box4"></div> /*box4是wrapper的子孫元素，不是彈性元素*/
</div>
<div class="box2"></div>
<div class="box3"></div>
</div>
主軸與縱軸
先提前介紹一個彈性容器樣式：flex-direction 指定彈性元素在彈性容器內的排列方向
/*flex-direction: 指定彈性元素在彈性容器內的排列方向 默認值:row
row:水平排列（自左向右排列）
row-reverse:反向水平排列（自右向左排列）
column:縱向排列（自上向下排列）
column-reverse:反向縱向排列（自下向上排列）*/
flex-direction:column-reverse;
主軸：彈性元素的排列方向爲主軸
側軸：與彈性元素垂直的軸稱爲側軸
如：當flex-direction:row時，主軸方向爲自左向右 側軸就是自上向下
當flex-direction:column-reverse時，主軸方向爲自下向上 側軸就是自右向左
按此類推
當flex-direction:row時：
當flex-direction:column-reverse;
彈性容器樣式
彈性容器樣式是爲彈性容器設置的屬性。
1.上面已經講過的flex-direction
- flex-wrap:設置彈性元素是否在彈性容器內自動換行 默認值：nowrap
nowrap:元素不會自動換行
wrap:元素沿着側軸方向換行
wrap-reverse:元素沿着側軸的反方向換行`
這就是上面判斷主軸和側軸的作用
.wrapper{
width: 200px;
border: red solid 5px;
/* 開啓彈性佈局的兩種方式 */
display: flex;
flex-direction:row;
/*flex-wrap:設置彈性元素是否在彈性容器內自動換行 默認值：nowrap
nowrap:元素不會自動換行
wrap:元素沿着側軸方向換行
wrap-reverse:元素沿着側軸的反方向換行
*/
flex-wrap: wrap;
}
.box1,.box2,.box3{
width: 100px;
height: 100px;
/*先設置彈性元素不收縮*/
flex-shrink: 0;
}
.box1{
background-color: royalblue;
}
.box2{
background-color:yellow;
}
.box3{
background-color: salmon;
}
以主軸方向爲row爲例。
flex-wrap: nowrap;很明顯看到其內部彈性元素不會換行
flex-wrap: wrap;很明顯看到內部彈性元素自上到下換行
flex-wrap:wrap-reverse;很明顯看到內部彈性元素自下到上換行
flex-flow: 是上面兩個屬性direction和wrap的簡寫屬性
如：flex-flow: column wrap;設置主軸方向是從上到下， 元素沿着側軸方向換行。
justify-content: 分配主軸上的空白空間，改變主軸元素的排列方式
可選項：
flex-start:元素沿主軸起邊開始排列
flex-end:元素沿主軸終邊開始排列
center:元素居中排列
space-around:空白分佈到兩側
space-between:空白均勻分佈到元素之間
space-envenly: 空白均勻分佈在元素單側（此項兼容性不高，如IE瀏覽器不兼容）
justify-content： flex-start;
justify-content： flex-end;
justify-content： center;
justify-content： space-around;
justify-content： space-between;
justify-content： space-envenly;
align-items: 每個元素在側軸上的對齊方式
可選項：
stretch 默認值，在同一行每個元素之間的高度相同，不同行的高度可不同
flex-start 沿側軸的起始邊對齊,不會伸展
flex-end 沿側軸的末尾邊對齊
center 居中對齊
align-items: stretch;的情況
align-items: flex-start ；的情況
align-items: flex-end ；的情況
align-items: center；的情況
align-content: 分配側軸上的空白空間
可選項：
flex-start:元素沿側軸起邊開始排列
flex-end:元素沿側軸終邊開始排列
center:元素居中排列
space-around:空白分佈到兩側
space-between:空白均勻分佈到元素之間
space-envenly: 空白均勻分佈在元素單側（此項兼容性不高，如IE瀏覽器不兼容）
跟justify-content:差不多。只不過一個是在主軸一個是在側軸
align-items 和align-content的區別
根據上面我們可以發現align-items和align-content都是對側軸進行作用的。align-items和align-content有相同的功能，但是align-items是對側軸上的每個元素進行作用。align-content則是對``整個容器進行作用且align-content屬性只適用於多行的flex容器。
舉個例子理解一下
flex-flow: row wrap;/*給容器設置方向並換行使其成爲多行容器*/
align-items:center;
下面就是設置了align-items:center且沒有設置align-content的情況。
不設置align-items,設置align-content:center;的情況
通過上面這組可以對比到他們兩個方式的不同，align-items是給每個元素的每一行都進行居中。而align-content這是對這整個容器的元素進行居中排列。若同時設置
align-items:center; align-content:center;效果會是跟只設置align-content:center;的效果一樣。這說明了對於有多行的flex容器，align-content的優先級大於align-items。
若設置彈性容器不進行換行，設置align-content會不起作用，這說明了align-content屬性只適用於多行的flex容器。
彈性元素樣式
彈性元素樣式是爲彈性元素設置的屬性
flex-grow: 指定彈性元素的伸展係數 默認值：0
當沒有給彈性元素設定flex-grow時，彈性元素不伸展，即等於0
flex-grow:1 彈性元素伸展，且均勻伸展填充滿空位
同時可以分別給每個彈性容器內的彈性元素分別設置flex-grow，使每個彈性元素按不同比例伸展。、
.box1,.box2,.box3{
width: 100px;
height: 100px;
flex-grow: 0;
}
flex-grow: 0;的情況
flex-grow:1的情況
分別給每個彈性元素設置flex-grow
.box1{
background-color: royalblue;
flex-grow: 1;
}
.box2{
background-color:yellow;
flex-grow: 2;
}
.box3{
background-color: salmon;
flex-grow: 3;
}
效果如下:
解釋：這個彈性容器warpper的總寬度設定爲800px,原先box1,box2,box3都是寬度高度爲100px。
所以就會剩下500px的空白。因爲設置了flex-grow不爲0,所以box1的寬度會是100px+500*(1/6)px，box2的寬度會是100px+500*(2/6)px，box3的寬度會是100px+500*(3/6)px。
flex-shrink: 指定彈性元素的收縮係數 默認值:1
flex-shrink:1 當彈性元素的寬度或者高度超過彈性容器的高度和寬度的時候，彈性容器下的彈性元素會均勻收縮
當flex-shrink:0 彈性元素不收縮，就會溢出父類元素。
同樣也可以分別對每個的彈性元素設置不同的flex-shrink. flex-shrink越大，收縮越大。
/*已將父類wrapper的width設爲200px*/
.box1,.box2,.box3{
width: 100px;
height: 100px;
flex-shrink: 1;
}
flex-shrink:1的情況
flex-shrink:0的情況
分別給每個彈性元素設置flex-shrink的情況
flex-basis:設置元素在主軸上的基礎長度。
flex:可以設置彈性元素的三個樣式（flex-grow，flex-shrink,flex-basis）
例如：flex:1,1,auto；
order:設置彈性元素的排列順序
根據下圖可以觀察到設置order後，.box3排在了第一，box2排在了最後，改變了元素的排列順序
.box1{
background-color: royalblue;
order: 2;
}
.box2{
background-color:yellow;
order: 3;
}
.box3{
background-color: salmon;
order: 1;
}
align-self:用來覆蓋當前彈性元素的align-items屬性，就是我們可以單獨的給一個彈性元素設置不同的align-items屬性。
舉個例子：
當前整個情況是這樣子的，每個元素都是在每一行處於居中位置。
當我們在給box1（藍色那個元素）設置align-self:flex-end;後可以觀察到藍色的元素到達了當行的底部，即單獨改變了box1的佈局情況
