Flex弹性容器

定义：

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。通过给元素设置display属性，属性值为flex或者inline-flex。使其变成弹性容器，容器中的直系子元素就会变为弹性元素。

语法规则：

div{
display:flex;//变成弹性盒
}

常用的父项属性：

1.flex-direction,通过这个属性可以可以设置主轴的方向，它包括以下值：

水平方向 起点在左端： flex-direction: row

主轴在水平，起点在右端 ：flex-direction: row-reverse

主轴在垂直，起点在上沿 ：flex-direction: column

 主轴在垂直，起点在下沿 ： flex-direction: column-reverse

2.justify-content用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式，属性值有：

flex-start:默认值，项目位于容器的开头

 

 flex-end:项目位于容器的结尾

 

 center:项目位干容器的中心

 space-between:项目位于各行之间留有空白的容器内

 space-around:项目位于各行之前、之间、之后都留有空白的容器内

 initial:设置该属性为它的默认值

inherit:从父元素继承该属性

3.align-item侧轴排列方式（单行）

侧轴居中 ：align-items: center

 侧轴上面顶部排列 ： align-items: flex-start

 侧轴上面底部排列 ： align-items: flex-end

 拉伸:不能设置子元素的高度 ： align-items: stretch

4.align-content侧轴排列方式（多行）

侧轴居中 ： align-content: center

 侧轴上面顶部排列 ：align-content: flex-start

 侧轴上面底部排列 ：align-content: flex-end

 平分侧轴上面的剩余空间 ：align-content: space-around

 侧轴上,两边贴边,中间平分剩余空间 ：align-content: space-between

 子项属性：

子元素在侧轴底部 ：align-self: flex-end

子元素在侧轴顶部 ： align-self: flex-start

子元素在侧轴居中排列 ： align-self: center