微信小程序CSS之Flex布局

转载:https://blog.csdn.net/u012927188/article/details/83040156

  相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆放位置,其原因是不了解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 :多行上下对齐方式

一、flex-direction属性:
flex-direction决定了item里面排列的方向,有下面四个属性值:
  row(默认值):横向排序,从左边起开始排列item。
  row-reverse:横向排序,从右边起开始排列item。
  column:纵向排列,从顶部开始排列item。
  column-reverse:纵向排列,从底部开始排列item。
二、flex-wrap属性:
默认情况下,项目都排在一行上不换行,flex-wrap有三个属性值:
  nowrap (默认)不换行
  wrap 如果第一行满了,换行
  wrap-reverse 换行,第一行在下方
三、flex-flow属性:

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

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

  flex-start(默认值):左对齐
  flex-end:右对齐
  center: 居中
  space-between:等距对齐,两端对齐,item之间的间隔都相等。
  space-around:每个item两侧的间隔相等。所以,item之间的间隔比item与边框的间隔大一倍。
五、align-items属性:
align-items用来定义item上下对齐的方式,也有五种
  flex-start:向上对齐
  flex-end:向下对齐。
  center:居中。
  baseline: item的第一行文字的基线对齐。
  stretch(默认值):如果item未设置高度或设为auto,将占满整个容器的高度。
六、align-content属性:
align-content是多行对齐方式,如果只有把一行,此属性不起作用
  flex-start:向上对齐。
  flex-end:向下对齐。
  center:居中。
  space-between:等距对齐,两端对齐,item之间的间隔都相等。
  space-around:每个item两侧的间隔相等。所以,item之间的间隔比item与边框的间隔大一倍。
  stretch(默认值):所有item占满整个容器。
七、扩展:

  如果想对容器内的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: %;
background-color: rgb(, , );
display: flex;
} .item {
height: 100rpx;
width: 100rpx;
border: 5rpx solid #fff;
}

image.png

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

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

image.png

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

/**index.wxss**/
.container {
height: 1000rpx;
width: %;
background-color: rgb(, , );
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;
}

image.png

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

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

总结

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

上一篇:待实践二:MVC3下的3种验证 (1)前台 jquery validate验证 (2)MVC实体验证 (3)EF生成的/自己手写的 自定义实体校验(伙伴类+元素据共享)


下一篇:package.json