微信小程序：布局样式（水平竖直排列）

原创已于 2024-04-28 09:13:38 修改 · 744 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #notepad++ #小程序

于 2023-12-13 15:59:52 首次发布

微信小程序同时被 2 个专栏收录

68 篇文章

订阅专栏

css

11 篇文章

订阅专栏

本文展示了如何使用WXML和CSS实现一个响应式的布局，包括left和right两个部分，右侧采用flex布局，分为right-item1和right-item2，分别占据一半空间并垂直排列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

wxml

<view class="layout">
    <view class="left">
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    </view>
    <view class="right">
      <view class="right-item1">2</view>
      <view class="right-item2">3</view>
    </view>
</view>

wxss

.layout {
  width: 100%;
  display: flex;

}
.left {
  width: 50%;
  background-color: #6ba2e0;
}

.right {
  flex: 1;
  display: flex;
  /*排列方式为竖直*/
  flex-direction: column;
}

.right-item1 {
  flex: 1;
  background-color: #8bc34a;
}

.right-item2 {
  flex: 1;
  background-color: #ce8adf;
}

关注博主即可阅读全文