flex佈局原理
flex 是Flexible Box的縮寫,意思是'彈性佈局', 用來爲盒模型提供最大的靈活性,任何一個容器都可以指定爲flex佈局
當爲父盒子設爲flex佈局後, 子元素的float, clear 和 vertical-align屬性將失效
flex佈局又叫彈性佈局, 伸縮佈局, 伸縮盒佈局, 彈性盒佈局
採用flex 佈局的元素, 稱爲flex 容器. 它的所有子元素自動成爲容器成員,成爲flex項目
flex 父項常見屬性
flex-direction：設置主軸的方向
justify-content：設置主軸上的子元素排列方式
flex-wrap：設置子元素是否換行
align-content：設置側軸上的子元素的排列方式（多行）
align-items：設置側軸上的子元素排列方式（單行）
flex-flow：複合屬性，相當於同時設置了 flex-direction 和 flex-wrap
flex-direction: 設置主軸的方向
在 flex 佈局中，是分爲主軸和側軸兩個方向，同樣的叫法有： 行和列、x 軸和y 軸
默認主軸方向就是 x 軸方向，水平向右
默認側軸方向就是 y 軸方向，水平向下
注意: 主軸和側軸是會變化的，就看 flex-direction 設置誰爲主軸，剩下的就是側軸。而我們的子元素是跟着主軸來排列的
| 屬性 | 描述 |
|---|---|
| row | 默認值從左到右 |
| row-reverse | 從右到左 |
| column | 從上到下 |
| column-reverse | 從上到下 |
div { display: flex; flex-direction: column; /*設置主軸爲垂直*/}justify-content: 設置主軸上的子元素排列方式
| 屬性 | 描述 |
|---|---|
| flex-start | 默認值從頭部開始 如果主軸是x軸, 則從左到右 |
| flex-end | 從尾部開始排列 |
| center | 從主軸居中對齊 |
| space-around | 平分剩餘空間 |
| space-between | 先兩邊貼邊 再平分剩餘空間 |
div { display: flex; justify-content: space-between; /* 先兩邊貼邊， 在分配剩餘的空間 */}flex-wrap設置是否換行
默認情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，flex佈局中默認是不換行的。
| 屬性 | 描述 |
|---|---|
| nowrap | 默認值 不換行 |
| wrap | 換行 |
div { display: flex; /* flex佈局中，默認的子元素是不換行的， 如果裝不開，會縮小子元素的寬度，放到父元素裏面 */
flex-wrap: nowrap;
}align-items 設置側軸上的子元素排列方式（單行 ）
該屬性是控制子項在側軸（默認是y軸）上的排列方式 在子項爲單項（單行）的時候使用
| 屬性 | 描述 |
|---|---|
| flex-start | 默認值從頭部開始 |
| flex-end | 從尾部開始排列 |
| center | 居中顯示 |
| stretch | 拉伸 |
align-content 設置側軸上的子元素的排列方式（多行）
設置子項在側軸上的排列方式 並且只能用於子項出現 換行 的情況（多行），在單行下是沒有效果的
| 屬性 | 描述 |
|---|---|
| flex-start | 默認值 從側軸頭部開始 |
| flex-end | 從側軸的尾部開始排列 |
| center | 從主軸居中對齊 |
| space-around | 子項在側軸平分剩餘空間 |
| space-between | 子項在側軸先兩邊貼邊 再平分剩餘空間 |
| stretch | 設置子項元素高度平分父元素高度 |
flex-flow: 是 flex-direction 和 flex-wrap 屬性的複合屬性
flex-flow: row wrap;
flex 子項常見屬性
flex: 定義子項目分配剩餘空間，用flex來表示佔多少份數
.item { flex: <number>; /* 默認值 0 */}align-self控制子項自己在側軸上的排列方式
align-self 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋 align-items 屬性
默認值爲 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch
span:nth-child(2) { /* 設置自己在側軸上的排列方式*/
/* 還會佔用原位置,不會影響其餘子項 */
align-self: flex-end;
}order 屬性定義項目的排列順序
默認值 0 決定了某個子項在其餘兄弟子項的排列順序 >0 順序靠後 <0 順序向前
.item { order: <number>;
}css 行內水平均等排布方式
<div class="justify"> <span>測試1</span> <span>測試2</span> <span>測試3</span> <span>測試4</span> </div>
<style>
.justify{
display:flex;
display:-webkit-flex;/*Safari*/
justify-content:space-between;/*水平排布方式*/
align-items:center;/*垂直對齊方式*/}
</style>