快捷导航
 
微信小程序CSS之Flex布局
VIEW CONTENTS
-推马SEO 门户 SEO知识 查看内容

微信小程序CSS之Flex布局

2018-10-22 22:20| 发布者: relaxing| 查看: 485| 评论: 6
摘要: css相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆放位置,其原因是不了解CSS样式的属性,所以,今天代码君打算写一篇关于CSS的教程,给大家普及一下。说起CSS布局,首先要讲解的 ...

css相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆放位置,其原因是不了解CSS样式的属性,所以,今天代码君打算写一篇关于CSS的教程,给大家普及一下。

说起CSS布局,首先要讲解的就是FLex布局,这个可以说是一个万能钥匙,遇到什么复杂的布局,都可以通过Flex布局搞定,为了方便大家理解Flex属性,我将会一步步解析FLex的属性,并附上效果图

基本概念

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

Flex容器属性

Flex总共有6个属性

flex-direction 设置排列方向flex-wrap 内容满一行,是否换行flex-flow flex-direction属性和flex-wrap属性的简写形式justify-content 左右对齐方式align-items 上下对齐方式align-content 多行上下对齐方式

1. flex-direction属性

flex-direction决定了item里面排列的方向,有下面四个属性值

row(默认值):横向排序,从左边起开始排列item。row-reverse:横向排序,从右边起开始排列item。column:纵向排列,从顶部开始排列item。column-reverse:纵向排列,从底部开始排列item。

2. flex-wrap属性

默认情况下,项目都排在一行上不换行,flex-wrap有三个属性值

nowrap (默认)不换行wrap 如果第一行满了,换行wrap-reverse 换行,第一行在下方

3. flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,这里不建议使用,就不介绍了

4. justify-content属性

justify-content用来定义item 左右对齐的方式,有以下五种

flex-start(默认值):左对齐flex-end:右对齐center: 居中space-between:等距对齐,两端对齐,item之间的间隔都相等。space-around:每个item两侧的间隔相等。所以,item之间的间隔比item与边框的间隔大一倍。

5. align-items属性

align-items用来定义item上下对齐的方式,也有五种

flex-start:向上对齐flex-end:向下对齐。center:居中。baseline: item的第一行文字的基线对齐。stretch(默认值):如果item未设置高度或设为auto,将占满整个容器的高度。

6. align-content属性

align-content是多行对齐方式,如果只有把一行,此属性不起作用

flex-start:向上对齐。flex-end:向下对齐。center:居中。space-between:等距对齐,两端对齐,item之间的间隔都相等。space-around:每个item两侧的间隔相等。所以,item之间的间隔比item与边框的间隔大一倍。stretch(默认值):所有item占满整个容器。

7. 扩展:如果想对容器内的item按比例划分的话,可以用flex-grow属性,赋值就是该item占一行的比例

Flex属性实战

初始代码

<!--index.wxml--><view class="container"> <view class="item"> v1 </view> <view class="item"> v2 </view> <view class="item"> v3 </view></view>


/**index.wxss**/.container { height: 1000rpx; width: 100%; background-color: rgb(13, 134, 78); display: flex;}.item { height: 100rpx; width: 100rpx; border: 5rpx solid #fff;}


微信小程序CSS之Flex布局


上图为初始效果图,因为 flex-direction默认为row,所以刚开始会横向排列,如果要纵向排列加入flex-direction设置为column即可

/**index.wxss**/.container { height: 1000rpx; width: 100%; background-color: rgb(13, 134, 78); display: flex; /* 改动的代码 */ flex-direction: column;}


微信小程序CSS之Flex布局


改过属性的效果图如上,剩下的两个属性就不演示了,接下来试一下justify-content左右对齐方式,我们就实现一下等距对齐方式吧

/**index.wxss**/.container { height: 1000rpx; width: 100%; background-color: rgb(13, 134, 78); display: flex; /* 改动的代码 */ flex-direction: row; justify-content: space-between;}


微信小程序CSS之Flex布局


ok,接下来是上下对齐,align-items这个里面有一个和左右对齐不一样的,就是根据内容文字对齐baseline,让我们看一下效果是什么样的,为了有对比性,我把文字的高度设置的不一样

/**index.wxss**/.container { height: 1000rpx; width: 100%; background-color: rgb(13, 134, 78); display: flex; /* 改动的代码 */ flex-direction: row; justify-content: space-between; align-items: baseline;}.item { height: 100rpx; width: 100rpx; border: 5rpx solid #fff;}.item2 { height: 100rpx; width: 100rpx; border: 5rpx solid #fff; padding-top: 20rpx;}


微信小程序CSS之Flex布局


看到了吧,这个属性就是根据第一行文字为基线对齐的,因为第二个view字位置和其他不一样,所以整体往上移动了,最后一个,实现以下等比划分item,用到的属性是flex-grow,这个属性需要设置在item里面才可以

/**index.wxss**/.container { height: 1000rpx; width: 100%; background-color: rgb(13, 134, 78); display: flex; /* 改动的代码 */ flex-direction: row; justify-content: space-between; align-items: baseline;}.item { height: 100rpx; width: 100rpx; border: 5rpx solid #fff; /*占比1*/ flex-grow: 1;}.item2 { height: 100rpx; width: 100rpx; border: 5rpx solid #fff; /*占比1*/ flex-grow: 1;}


微信小程序CSS之Flex布局


总结

好了,这些就是Flex的全部属性,最后告诉一下读者,不要只看文章,一定要跟着教程,去实战一下,只有这样,才可以对属性了解透彻,如果你掌握这些,相信市面上的小程序基础布局,你都可以实现的。


鲜花

握手

雷人

路过

鸡蛋
relaxing

转发了

2018-10-22 22:11 引用
relaxing

转发了

2018-10-22 22:01 引用
relaxing

转发了

2018-10-22 21:51 引用
relaxing

转发了

2018-10-22 21:41 引用
relaxing

转发了

2018-10-22 21:31 引用
relaxing

转发了

2018-10-22 21:21 引用

VR视频更多
周排行

让创业更简单

  • 反馈建议:service_media@36kr.com
  • 客服电话:
  • 工作时间:周一到周五

云服务支持

精彩文章,快速检索

关注我们

Copyright 推马SEO-SEO网络推广|优化排名|SEO教程-seo站长论坛  Powered by©  技术支持: