微信小程序开发之——flex布局

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

置顶 SundayAaron

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

阅读量1.3w

点赞数 4

分类专栏：微信小程序 Sunday——微信小程序从入门到实战文章标签： flex html 微信

本文链接：https://blog.csdn.net/SundayAaron/article/details/53487637

版权

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

7 篇文章 0 订阅

订阅专栏

Sunday——微信小程序从入门到实战

7 篇文章 191 订阅

订阅专栏

打开微信小程序开发工具，新建Hello word项目，删除掉无用的代码。

flex-direction

flex-direction属性表示布局的方向有两个值： row | column 默认属性是row 行布局

html代码如下：

<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

效果图：
这里写图片描述

flex-direction: column属性：

<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="flex-direction:column;height: 100%;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

flex-direction: column效果图：
这里写图片描述

justify-content

justify-content:弹性项目在主轴main-axis线上的对齐方式；值：flex-start | flex-end |
center | space-between | space-around （注：当横向排列时主轴就是x轴；反之则是y轴。）

justify-content:flex-start

<view class="section">
  <view class="section__title">justify-content:flex-start</view>
  <view class="flex-wrp" style="flex-direction:row;justify-content:flex-start;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

效果图：
这里写图片描述

flex-end | center | space-between | space-around 值同理
这里写图片描述

align-items

align-Items表示在垂直方向上的布局情况定义在父级容器中；
有 flex-start | flex-end | center |stretch 四个值。

align-items:flex-start;

<view class="section">
  <view class="section__title">align-items:flex-start;</view>
  <view class="flex-wrp" style="flex-direction:row;align-items:flex-start;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

效果图：
这里写图片描述
align-items:center;

<view class="section">
  <view class="section__title">align-items:center;</view>
  <view class="flex-wrp" style="flex-direction:row;align-items:flex-start;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

效果图：
这里写图片描述

align-items:flex-end;

<view class="section">
  <view class="section__title">align-items:flex-end;</view>
  <view class="flex-wrp" style="flex-direction:row;align-items:flex-end;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>