弹性布局有两个轴x和y，x为主轴，y为交叉轴，通过flex可以实现改变元素所在位置
属性
display: flex; 在父元素样式中加入此样式
设置元素在主轴上的对齐方式
justify-content: center;
值有：center（主轴中点对齐）、flex-start（主轴起点对齐）、flex-end(主轴终点对齐)、space-around（把剩余的空间均分给项目的左右）、space-between（两端对齐：把剩余的空间均分给项目与项目之间）。
- 交叉轴对齐方式 align-items: center;
align-items：设置项目在交叉轴上的对齐方式，值有：center（交叉轴中点对齐）、flex-start(交叉轴起点对齐)、flex-end（交叉轴终点对齐）、stretch（项目高度充满容器 ，默认的）、baseline（文字基线对齐）
- 设置主轴的方向 flex-direction: column-reverse;
/row代表主轴从左向右/
/row-reverse代表主轴从右到左/
/column代表主轴从上到下/
/column-reverse代表主轴从下到上/
- 如果元素过多默认不会换行，需要手动换行 flex-wrap:wrap;
值有：wrap：换行后，高度均分容器高度。默认。
wrap-reverse：换行后，上下顺序颠倒。
- 当有多条主轴的情况下，使用align-content设置项目在交叉轴上的对齐方式（只有在有多条主轴的时候才会起作用）。
align-content:center;
值有：flex-start、flex-end、center、space-between、space-around、stretch。
**注意---**当把父元素设置为弹性容器后子元素自动成为inline-flex。默认宽度由内容撑开，高度和容器一致，并可以设置宽高。
- flex-grow将容器的空间按子元素的个数进行平分
例：
.box{
border: 1px solid blue;
height: 300px;
display: flex;
}
.box section{
border: 1px dashed red;
flex-grow: 1;将容器box评分为三分，1表示每个占一份。
}
结构
<body>
<div class="box">
<section>section1</section>
<section>section2</section>
<section>section3</section>
</div>
</body>
- flex-basis：通过这只flex-basis可以设置元素在主轴上占据的空间，通常设置百分比，进行列的划分。
例：
.box section{
border: 1px dashed red;
flex-basis: 30%;
}
align-self：单独设置元素在交叉轴上的对齐方式
例：
.box section:nth-child(1){
align-self: flex-start;
}
- order：设置项目的排列序号，可以为负，谁小谁在前(没有设置的默认为0)；
