查看更多详情： 微信小程序之view布局 · 语雀

微信小程序view布局 Flex

微信小程序 View 支持两种布局方式：Block 和 Flex
所有 View 默认都是 block
要使用 flex 布局的话需要显式的声明：display:flex

wxml页面：

<view class="A">
  <view class='item1'>你好</view>
  <view class='item2'>你好</view>
  <view class='item3'>你好</view>
</view>

wxss页面：

.A{
  background: #f9f9;
  width: 100%;
  display: flex;
  flex-direction:column-reverse;
  }

.item1 {
  background-color: red;
}

.item2 {
  background-color: dodgerblue;
}

.item3 {
  background-color: greenyellow;
}

显示：

然后我们先都加上 display: flex

使用 flex 布局，主意，貌似 view 不会自动继承，需要在每个想使用的 view 里都加上。

首先是横向布局和竖向布局，要设置属性 flex-direction ,它有4个可选值：

• row：从左到右的水平方向为主轴
• row-reverse：从右到左的水平方向为主轴
• column：从上到下的垂直方向为主轴
• column-reverse：从下到上的垂直方向为主轴

row：

.A{
  background: #f9f9;
  width: 100%;
  display:flex;
  flex-direction:rowrow;
  }

row-reverse：

.A{
  background: #f9f9;
  width: 100%;
  display:flex;
  flex-direction:row-reverse;
  }

然后我们要设置元素在横向上的布局方向，需要设置 justify-content 属性，它有5个值可选：

• flex-start：主轴起点对齐(默认值

.A{
  background: #f9f9;
  width: 100%;
  display:flex;
  justify-content:flex-star;
  }

• flex-end：主轴结束点对齐

.A{
  background: #f9f9;
  width: 100%;
  display:flex;
  justify-content: flex-end;
  }

• center：在主轴中居中对齐

.A{
  background: #f9f9;
  width: 100%;
  display:flex;
  justify-content: center;
  }

• space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等

.A{
  background: #f9f9;
  width: 100%;
  display:flex;
  justify-content: space-between;
  }

-space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同

.A{
  background: #f9f9;
  width: 100%;
  display:flex;
  justify-content: space-around;
  }

这种布局如何实现

html代码

<view class="container"> <!--最外的盒子-->
  <view class="me_box">
    <view class="me_box_bg"></view> <!--黄色的背景-->
    <view class="me_box_content"> <!--具体的内容-->
      12345
    </view>
  </view>
</view>

css代码

.me_box{
  position: relative;
  min-height: 100vh;
  background-color: #F8F8F8;
}
.me_box_bg{
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 280rpx;
  transform: translate(-50%);
  background-color: #D1B782;
}
.me_box_content{
  position: relative;
  width: 100%;
  padding: 24rpx;
}