小程序之弹性盒子布局

在整体布局设置display为flex 开启弹性盒子布局

1. 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