Flexbox，彈性盒子布局，跟浮動布局相比，Flexbox的可預測性更好，還能提供更精細的控制。它也能輕松解決困擾我們許久的垂直居中和等高列問題。
Flexbox的原則
首先需要使用display屬性，把元素設定為彈性容器，它的子元素就是彈性子元素。
彈性子元素預設是在同一行按照從左到友的順序并排排列。如下圖：
flexbox預設水準方向為主軸，垂直方向為副軸。
需要相容其他浏覽器，則需要添加對應浏覽器的字首：
display: flex;
display: -webkit-flex;
display: -ms-flexbox; Flexbox允許使用
margin: auto;
來控制彈性子元素的之間的可用空間。
也可以使用
margin-left: auto;
講最後一個子元素移動到最右邊【在最後一個子元素設定margin-left:auto】
通過相鄰兄弟選擇器設定元素之間的外邊距，實作導航菜單：最有一個菜單移動到最右邊，其餘菜單設定一定的margin-left，
div + div {
margin-left: 10px;
} 彈性子元素的大小
flex屬性設定子元素的大小【在主軸方向上的大小】
flex屬性是flex-grow、flex-shrink、flex-basis的簡寫
flex-basis
定義子元素大小的基準值，就是定義一個初始值，可以給該元素設定任何的width值，包括px、em、%。
flex-grow
子元素根據flex-basis的值計算出來後，不一定占滿這個彈性容器，那麼多出來的留白，則通過flex-grow屬性來進行配置設定。如果flex-grow為0，那麼該元素的寬度不會超過flex-basis的值。例如：
<h2>彈性子元素的大小</h2>
<div className="flexbox-flex">
<div>1</div>
<div>2</div>
<div>3</div>
</div> .flexbox-flex {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
border: 1px solid blue;
div {
background-color: red;
color: #fff;
font-weight: bold;
font-size: 20px;
text-align: center;
line-height: 100px;
border-radius: 5px;
}
div + div{
margin-left: 10px;
}
div:nth-child(1) {
flex: 0 1 20%;
}
div:nth-child(2) {
flex: 0 1 20%;
}
div:nth-child(3) {
flex: 0 1 40%;
}
} 如果留白部分由三個子元素平均配置設定，則三個元素分别設定為
div:nth-child(1) {
flex: 0 1 20%;
}
div:nth-child(2) {
flex: 0 1 20%;
}
div:nth-child(3) {
flex: 0 1 40%;
} flex-grow的值越大，那麼它占據留白部分的比例越大。
flex-shrink
計算出子元素的初始尺寸後，它們累加起來可能會超過整個容器，那麼導緻溢出。
flex-shrink的作用就是控制子元素收縮不溢出
flex-shrink為0，則子元素不收縮。
彈性方向
彈性方向，其實就是切換主軸和副軸，用彈性容器的flex-direction屬性來控制
flex-direction的預設值是row，row-reverse反方向排列，
column，主軸為垂直方向；
column-reverse，垂直方向底部往上排列。
.flexbox-direction {
display: flex;
flex-direction: column;
border: 1px solid blue;
div {
width: 100px;
line-height: 100px;
text-align: center;
font-size: 20px;
font-weight: bold;
background-color: aqua;
margin-top: 10px;
}
div:nth-child(1) {
flex: 0 0 20%;
}
div:nth-child(2) {
flex: 0 0 20%;
}
div:nth-child(3) {
flex: 0 1 30px;
}
} 對齊、間距
flex-wrap
設定彈性容器内是否換行展示，預設值：nowrap，不換行
wrap：換行
wrap-reverse：反向換行。
.flexbox-canter {
display: flex;
flex-wrap: wrap;
div {
width: 300px;
line-height: 100px;
text-align: center;
font-size: 20px;
font-weight: bold;
background-color: bisque;
margin-bottom: 10px;
margin-right: 10px;
}
} flex-flow
是flex-direction和flex-warp的簡寫
justify-content
控制子元素在主軸上的對齊方式
<h1>對齊間距</h1>
<div className="flexbox-canter">
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
</div> .flexbox-canter {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
border: 1px solid blueviolet;
div {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
text-align: center;
font-size: 20px;
font-weight: bold;
background-color: bisque;
margin-bottom: 10px;
margin-right: 10px;
}
} - flex-end，主軸末尾開始排列；
- flex-start，主軸起始位置開始排列；
- center，從中間開始排列；
- space-between兩端對齊；
- space-around，第一個元素的前面和最後一個元素的後面加上相同的間距
- space-evenly，子元素兩端的間距相同
align-items
/* Basic keywords */
align-items: normal; // 預設值
align-items: stretch; // 彈性元素被在副軸方向被拉伸到與容器相同的高度或寬度。
/* Positional alignment */
align-items: center; // 副軸上居中
align-items: start; /* Pack items from the start */
align-items: end; /* Pack items from the end */
align-items: flex-start; /* Pack flex items from the start */
align-items: flex-end; /* Pack flex items from the end */
align-items: self-start;
align-items: self-end;
/* Baseline alignment */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* Overflow alignment (for positional alignment only) */
align-items: safe center;
align-items: unsafe center;
/* Global values */
align-items: inherit;
align-items: initial;
align-items: unset;