温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信小程序View中flex布局的示例分析

发布时间:2021-07-02 11:44:17 来源:亿速云 阅读:545 作者:小新 栏目:移动开发

这篇文章给大家分享的是有关微信小程序View中flex布局的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

微信小程序 View 支持两种布局方式:Block 和 Flex

所有 View 默认都是 block

要使用 flex 布局的话需要显式的声明:

display:flex;

下面就来介绍下微信小程序的 Flex 布局

先做一个简单的 demo

  <view class="main">
    <view class="item item1">1</view>
    <view class="item item2">2</view>
    <view class="item item3">3</view>
  </view>

加上背景色能看的更清楚些

.main {
  width: 100%;
  background-color: antiquewhite;
}

.item {
  height: 100rpx;
  width: 100rpx;
}

.item1 {
  background-color: red;
}

.item2 {
  background-color: dodgerblue;
}

.item3 {
  background-color: greenyellow;
}

然后大概是这个样子的:

微信小程序View中flex布局的示例分析

然后我们先都加上  display: flex

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

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

  • row:从左到右的水平方向为主轴

  • row-reverse:从右到左的水平方向为主轴

  • column:从上到下的垂直方向为主轴

  • column-reverse:从下到上的垂直方向为主轴

  • 我们来看下设置 row 和 row-reverse 的区别:

    row:

    微信小程序View中flex布局的示例分析


    row-reverse:

    微信小程序View中flex布局的示例分析

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

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

  • 微信小程序View中flex布局的示例分析

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

  • 微信小程序View中flex布局的示例分析

  • center:在主轴中居中对齐

  • 微信小程序View中flex布局的示例分析

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

  • 微信小程序View中flex布局的示例分析

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

  • 微信小程序View中flex布局的示例分析

    然后我们要设置元素在纵向上的布局方向,需要设置 align-items 属性,它有5个值可选:

  • stretch 填充整个容器(默认值)

  • 微信小程序View中flex布局的示例分析

  • flex-start 侧轴的起点对齐 (这里我们手动设置下子 view 的高度,来看的明显一些)

  • 微信小程序View中flex布局的示例分析

  • flex-end 侧轴的终点对齐

  • 微信小程序View中flex布局的示例分析

  • center 在侧轴中居中对齐

  • 微信小程序View中flex布局的示例分析

  • baseline 以子元素的第一行文字对齐

  • 微信小程序View中flex布局的示例分析

    子 View 还有个属性 align-self,可以覆盖父元素的 align-items 属性,它有6个值可选:auto | flex-start | flex-end | center | baseline | stretch (auto 为继承父元素 align-items 属性,其他和 align-items 一致)

    比如上面最后一个 baseline 的例子,我们把 item3 设置 align-self:flex-end;

    就成了这个样子:

    微信小程序View中flex布局的示例分析

    此外还有 flex-wrap 属性,用于控制子 View 是否换行,有3个值可选:

  • nowrap:不换行(默认)

  • wrap:换行

  • wrap-reverse:换行,第一行在最下面

  • 还有子 View 有个 order 属性,可以控制子元素的排列顺序,默认为0。

    比如还是上面那个例子,我们把 item3 设置 order:-1; 可以把 item3 排在前面

    微信小程序View中flex布局的示例分析


    flex 常用布局就这些

    写微信小程序的可以试试

    最后,要是啥时候小程序能直接支持 bootstrap 就更好了

感谢各位的阅读!关于“微信小程序View中flex布局的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI