学无先后,达者为师

网站首页 编程语言 正文

微信小程序布局框架初步了解(弹性容器)

作者:黑白自明 更新时间: 2022-07-12 编程语言

弹性容器(flex-direction)

在这里插入图片描述

row:横向
column:纵向

<view class='flex-container'>
  <view class='view-size bg-red'></view>
  <view class='view-size bg-green'></view>
  <view class='view-size bg-yellow'></view>
</view>
.flex-container{
  display: flex;
  flex-direction: row;
  background-color: lightcyan;
  height: 800rpx;
  width: 100%;
}

.view-size{
  height: 200rpx;
  width: 200rpx;

}
.bg-red{
  background-color: red;
}
.bg-green{
  background-color: green;
}
.bg-yellow{
  background-color: yellow;
}

在这里插入图片描述

在flex.wxss的.flex-container中加入
justify-content: flex-start
左对齐
在这里插入图片描述

justify-content: flex-end
右对齐在这里插入图片描述
justify-content: center
居中
这里没有flex
justify-content: space-between
散列效果 贴两边
在这里插入图片描述
justify-content: space-around
平分对齐 不贴两边
在这里插入图片描述
蓝箭头指向的位置是红箭头指向位置的一半
align-items: center
在这里插入图片描述
这一句是代表主轴方向的垂直居中
这里的主轴是row

原文链接:https://blog.csdn.net/weixin_46037227/article/details/110237388

栏目分类
最近更新