E企盈营销工具技术服务商 热线:4006-838-530

微信小程序之flex布局

E企盈直播平台营销卖货系统

微信小程序之flex布局在微信小程序中,view是最基础的布局容器,其支持两种布局方式block、flex,默认情况下,view的布局方式是block,如下所示:<view>    <view style=’background:red;’>1</view>    <view style=’background:blue;’>2</view>    <view style=’background:yellow;’>3</view></view>效果图: flex布局flex-direction在给view设置属性display: flex;之后,view的布局方式就会变为flex模式,此外还需要设置其flex-direction控制布局方向,flex-direction有4个值:row:从左到右的水平方向为主轴row-reverse:从右到左的水平方向为主轴column:从上到下的垂直方向为主轴column-reverse:从下到上的垂直方向为主轴flex-direction: row;<view class=’flex’>    <view class=’flex-item’ style=’background:red;’>1</view>    <view class=’flex-item’ style=’background:blue;’>2</view>    <view class=’flex-item’ style=’background:yellow;’>3</view></view>.flex {  display: flex;  flex-direction: row;  background: lightgray}.flex-item {  width: 60px;}效果图: flex-direction: row-reverse效果图: flex-direction: column效果图: flex-direction: column-reverse效果图: justify-content设置完view的布局方向之后,想要控制内容的对齐方式,需要设置justify-content属性,该属性值有:flex-start:主轴起点对齐(默认值)。flex-end:主轴终点对齐。center:在主轴中居中对齐。space-between:两端对齐,除了两端的子元素分别靠向两端的容器之外,其他子元素之间的间隔都相等。space-around:每个子元素之间的距离相等,两端的子元素距离容器的距离也和其它子元素之间的距离相同。flex-start<view class=’flex’>    <view class=’flex-item’ style=’background:red;’>1</view>    <view class=’flex-item’ style=’background:blue;’>2</view>    <view class=’flex-item’ style=’background:yellow;’>3</view></view>.flex {  display: flex;  flex-direction: row;  justify-content: flex-start;  background: lightgray}.flex-item {  width: 60px;}效果图: flex-end效果图: center效果图: space-between效果图: space_aroundalign-itemsalign-items属性值有:stretch 填充整个容器(默认值)flex-start 起点对齐flex-end 终点对齐center 居中对齐baseline 以子元素的第一行文字对齐flex-start<view class=’flex’>    <view class=’flex-item’ style=’background:red; height:50px;’>1</view>    <view class=’flex-item’ style=’background:blue; height:70px;’>2</view>    <view class=’flex-item’ style=’background:yellow;height:90px;’>3</view></view>.flex {  display: flex;  flex-direction: row;  background: lightgray;  justify-content: space-around;  align-items: baseline;  height: 100px;}.flex-item {  width: 60px;}效果图: flex-end效果图: center效果图: baseline效果图: 子 View 还有个属性 align-self,可以覆盖父元素的 align-items 属性,它有6个值可选:auto | flex-start | flex-end | center | baseline | stretch (auto 为继承父元素 align-items 属性,其他和 align-items 一致)此外还有 flex-wrap 属性,用于控制子 View 是否换行,有3个值可选:nowrap:不换行(默认)wrap:换行wrap-reverse:换行,第一行在最下面子 View 有个 order 属性,可以控制子元素的排列顺序,默认为0。微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序之flex布局
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏