小程序页面布局之Flexbox布局

最新推荐文章于 2024-07-12 09:30:00 发布

天地无边

最新推荐文章于 2024-07-12 09:30:00 发布

阅读量8.1k

点赞数 4

分类专栏：小程序文章标签： flex html css 布局 flexbox 小程序

本文链接：https://blog.csdn.net/u011848751/article/details/78488993

版权

本文介绍了如何使用Flexbox布局在小程序中实现循环列表图片加文字标题的两列自动换行布局。通过CSS设置`flex-direction: row`实现横向排列，`flex-wrap: wrap`实现换行，结合`justify-content: space-around`调整元素间间距。HTML结构与CSS样式代码详细展示，讲解了`vw`和`vh`响应式单位的应用，以及`justify-content`、`flex-direction`和`flex-wrap`的关键作用。

摘要由CSDN通过智能技术生成

实现效果：

循环列表图片加文字标题。实现两列布局自动换行。

CSS部分：

#two{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-content:center;
  justify-content:space-around;
  height:70vh;
}

#two .area{
  width:46vw;
  text-align: center;
}

#two为当前区域外层包装。

#two .area为内部循环包装标签。

HTML部分：

<view id='two'>
  <view class='area'>
      <image mode="widthFix" src='../assets/images/ttt.jpg' style='background:#faa33a;width:100%;' />
      <text>左边内容</text>
  </view>
    <view class='area'>
      <image mode="widthFix" src='../assets/images/aaa.jpg' style='background:#faa33a;width:100%;' />
      <text>左边内容</text>
  </view>
    <view class='area'>
      <image mode="widthFix" src='../assets/images/bbb.jpg' style='background:#faa33a;width:100%;' />
      <text>左边内容</text>
  </view>
    <view class='area'>
      <image mode="widthFix" src='../assets/images/ccc.jpg' style='background:#faa33a;width:100%;' />
      <text>左边内容</text>
  </view>
  <view class='area'>
      <image mode="widthFix" src='../assets/images/ddd.jpg' style='background:#faa33a;wi