flex布局_flex 竖排

常用属性介绍：

flex属性：
作用：开启flex布局
代码：display: flex;

flex-direction属性：
作用：决定项目元素的排列方向
代码：flex-direction: row | column
row代表从左到右横向排列，column代表从上到下竖着排列

flex-wrap属性：
作用：如果一条轴线排不下，是否决定项目元素换不换行
代码：flex-wrap: nowrap | wrap

justify-content属性：
作用：设置元素在水平方向上的对齐方式
代码：justify-content: center | space-between | space-around;

align-items属性：
作用：设置元素在垂直方向上的对齐方式
代码：align-items: center

以上代码运用如下：

1、 首先找到使用弹性盒子布局的容器元素view,首先将他变成一个flex

（1） display:flex; //设置完后默认的每个元素都是从左往右放置的

目标一：每个元素独占一行，自上而下放置

flex-direction: column;
1

目标二：自上而下放置时在垂直方向上均匀分布；元素在垂直方向上间隔一致，而且第一个和最后一个元素离顶部和底部都有一定的间距；

justify-content: space-around;
1

目标三：元素在水平方向上居中

align-items: center;
1