常用属性介绍:
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;
目标二:自上而下放置时在垂直方向上均匀分布;元素在垂直方向上间隔一致,而且第一个和最后一个元素离顶部和底部都有一定的间距;
justify-content: space-around;
目标三:元素在水平方向上居中
align-items: center;