Flex布局
flex布局原理:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
<!-- 当我们为父盒子设为flex布局以后,子元素的float, clear和vertical-align属性将失效 -->
{
display: flex;
}父元素属性
flex-direction：设置主轴的方向
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴
- 默认主轴方向就是x轴方向，水平向右
- 默认侧轴方向就是y轴方向，水平向下
- flex-direction属性决定主轴的方向（即项目的排列方向）
属性值 | 说明 |
row | 从左到右（默认值） |
row-reverse | 从右到左 |
column | 从上到下 |
column-reverse | 从下到上 |
justify-content：设置主轴上的子元素排列方式
属性值 | 说明 |
flex-start | 如果主轴是x轴，则从左到右（默认值） |
flex-end | 从尾部开始排列 |
center | 在主轴居中对齐（如果主轴是x轴则水平居中） |
space-around | 平分剩余空间 |
space-between | 先两边贴边再平分剩余空间（重要） |
flex-wrap：设置子元素是否换行
默认情况下,项目都排在一条线(又称”轴线" )上。
属性值 | 说明 |
nowrap | 默认值,不换行 |
wrap | 换行 |
align-items：设置侧轴上的子元素排列方式(单行)
属性值 | 说明 |
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属性是flex-direction和flex-wrap属性的复合属性 -->
{
flex-flow: row wrap;
}子元素属性
flex：定义子元素占据的份数
{
flex: <number> /* default 0 */
}flex属性可以不仅可以是number，也可以使用百分数，如下图的布局方式
<!-- 有10个元素，设置了flex：20%，就会自动换行，且每行是5个 -->
ul {
display: flex;
flex-wrap: wrap;
li {
flex: 20%
}
}align-self：控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性默认值为auto, 表示继承父元素的align-items属性,如果没有父元素,则等同于stretch.
span:nth-child(2) {
/*设置自己在侧轴上的排列方式*/
align-self: flex-end;
}order: 定义项目的排列顺序
数值越小,排列越靠前,默认为0。注意:和z-index不一样。