在整体布局设置display为flex 开启弹性盒子布局
-
flex-direction属性可以设置column(行元素) column-reverse（行倒序显示） row（列元素）row-reverse(列倒序)
2.justify-content属性设置为space-around为等间距布局
space-between 为左右布局 space-evenly：上下间距
3.flex-flow属性为wrap是不换行显示，如果需要进行自动换行，且执行左右或者等间距布局可以对justify-content属性进行控制，此外可以给定子盒子一定的宽度，就能实现float流式布局的效果
4.align-items设置元素在水平方向的显示位置
5.text-align 设置文本显示的位置
实现的布局代码：
.contenter{
background: gainsboro;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
text-align: center
}
1.png
网友评论