CSS弹性布局

弹性布局

1. 开启弹性布局的方法

   块元素开启flex布局

   .box{
     display: flex;
   }
   

   行内元素开启flex布局

   .box{
     display: inline-flex;
   }
   

2. 弹性布局的属性

   属性	值	效果
   flex-direction	row	设置主轴方向水平，起点在左端
   	row-reverse	设置主轴方向水平，起点在右端
   	column	主轴方向为垂直方向，起点在上沿
   	column-reverse	主轴方向为垂直方向，起点在下沿
   flex-wrap	nowrap	主轴不换行
   	wrap	换行，第一行在上方
   	wrap-reverse	换行，第一行在下方
   flex-flow	默认值为row nowrap	flex_direction和flex-wrap的简写形式
   justify-content	flex-star	左对齐
   	flex-end	右对齐
   	center	居中
   	space-between	两端对齐
   	space-around	每个项目之间的间隔相等
   align-items	flex-star	交叉轴的起点对其
   	flex-end	交叉轴的终点对其
   	center	交叉轴的中点对其
   	baseline	项目的第一行文字的基线对其
   	strench	如果项目未设置高度或设为auto，将占满整个容器的高度。
   align-content	flex-start	与交叉轴的起点对齐。
   	flex-end	与交叉轴的终点对齐。
   	center	与交叉轴的中点对齐
   	space-between	与交叉轴两端对齐，轴线之间的间隔平均分布。
   	space-around	每根轴线两侧的间隔都相等
   	stretch（默认值）	轴线占满整个交叉轴

水平垂直居中的几种方法