学习前后
上一篇:微信小程序开发之六数据绑定与列表渲染
下一篇:微信小程序开发之八 —— swiper、video、map组件与cover效果
Flex布局
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
我们可以在页面的.wxml输入如下代码:
<view class="flex">
<view class="item">JAVA</view>
<view class="item">Python</view>
<view class="item">小程序</view>
<view class="item">CSS</view>
</view>
为了让它们区分地更加明显,我们给它加个背景色,边框,让其居中处理,写在.wxss文件里面。
.item{
background: #1317df;
height: 100px;
text-align: center;
border: 1px solid #1aabe4;
}
结果如下:
现在是上下关系,如果想要弄成左右关系我们需要在给外层结构view组件加display:flex,即flex布局。
.flex{
display: flex;
}
结果如下:
可以看到使用flex布局后就变成了左右关系了,但这样看起来不好看,我们一开始希望的是它能跟前面一样均分,然后让里面的内容也居中就更好了,所以我们要给这四个item的进行修饰一下。
.item{
background: #1317df;
height: 100px;
text-align: center;
border: 1px solid #1aabe4;
display: flex;
flex: 1;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}
flex是弹性布局,flex:1这个样式是一个相对概念,这里的相对是指这每个item的宽度之比都为1
我们把CCS去掉,只留3个也是会平均分布的,如果我们想要分别占1/4、1/