小程序页面布局之Flexbox布局

最新推荐文章于 2024-05-16 18:30:00 发布

天地无边

最新推荐文章于 2024-05-16 18:30:00 发布

阅读量8.1k

点赞数 4

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

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

版权

实现效果：

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

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