综合教程

微信小程序flex box界面设计入门到精通-07课-flex容器属性-align-content设置各个行的对齐

时间:2019/1/6 10:48:08  作者:互联网  来源:网络转载  查看:56346  评论:0
内容摘要:基础语法align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐box { align-items: flex-start | flex-end | center | basel...

基础语法

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐

微信小程序flex_box界面设计入门到精通-07课-flex容器属性-align-content设置各个行的对齐
box { align-items: flex-start | flex-end | center | baseline | stretch; }

 flex-start:与交叉轴的起点对齐。
 flex-end:与交叉轴的终点对齐。
 center:与交叉轴的中点对齐。
 space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
 space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
 stretch(默认值):轴线占满整个交叉轴。


小程序应用

Wxml代码

<view class='zong'>

 

  <view class='fangxing'>

    <text>01</text>

  </view>

 

  <view  class='fangxing'>

    <text>02</text>

  </view>

 

  <view  class='fangxing'>

    <text>03</text>

  </view>

 

  <view  class='fangxing'>

    <text>04</text>

  </view>

 

  <view  class='fangxing'>

    <text>05</text>

  </view>

 

</view>

Wxss代码

.zong{

  border: 1px solid gainsboro;

  margin: 5px;

  height: 300px;

  display: flex;

  flex-wrap: wrap;

  align-content: flex-end;

}

.fangxing{

  width: 100px; height: 50px; 

  background-color:  #f5f5dc;

  margin: 10px;/*每个方框的外边距*/

}

 

效果图


微信小程序flex_box界面设计入门到精通-07课-flex容器属性-align-content设置各个行的对齐

欢迎大家支持我的视频课程:微信小程序样式Flex Box精通课程
https://ke.qq.com/course/368348?tuin=2bea1eb0
微信小程序flex_box界面设计入门到精通-01课-概述

相关评论
评论者:      验证码:  点击获取验证码
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |