flex布局

设置父元素的布局为flex，后续的子元素都按此来排序

 display: flex;

【1】默认的主轴是x轴，元素跟着主轴来排列

【2】设置y轴为主轴，那么x轴就成为了侧轴：

flex-direction:column;

【3】justify-content:设置主轴上子元素的排列方式

1）设置主轴上子元素的排列方式，默认从头部开始，如果主轴是x轴，既从左到右,如果

2) 以下属性值，不设置默认为flex-start

flex-start:默认从头部开始，如果主轴是x轴，既从左到右,如果主轴是y轴，则默认从上到下

flex-end:以主轴为标准，从尾部开始排列

space-around:平分剩余空间

center 主轴居中对齐

space-between:先两边贴边，再平分剩余空间

【4】flex-wrap:设置子元素是否换行

默认不换行，如果装不下，会缩小子元素的宽度，放到父元素里面去。

nowrap:不换行

rap:换行

【5】align-items:设置侧轴的子元素排列方式，在子项为单行时使用

flex-start：侧轴从头到尾

flex-end：侧轴从尾到头

center:侧轴垂直居中

stretch:拉伸，但是子盒子不要给高度

【6】align-content:设置侧轴子元素的排列方式，，并且只能用于子元素换行的情况下才能有效果（即多行）

即先设置父元素为flex-wrap:wrap,子元素才能设置以上属性

【7】flex-flow:把设置主轴方向和是否换行（是否换列）的简写

例如：

flex-flow:column wrap;

​flex-flow:row wrap;

【8】flex布局子项常见属性

1】flex:定义子项目分配剩余空间，用flex表示占多少份数