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;