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

微信小程序布局属性

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

flex是一种灵活的布局模型在不固定高度信息的例子中,我们只需要在容器中设置一下两个属性即可实现不确定下的垂直居中.container{  display: flex;  flex-direction: column;  justify-content: center;}flex不单是一个属性,它包含了一套新的属性集。属性集包括用于设置容器,和用于设置项目两部分。设置容器的属性有:display:flex;flex-direction:row(默认值) | row-reverse | column |column-reverseflex-wrap:nowrap(默认值) | wrap | wrap-reversejustify-content:flex-start(默认值) | flex-end | center |space-between | space-around | space-evenlyalign-items:stretch(默认值) | center  | flex-end | baseline | flex-startalign-content:stretch(默认值) | flex-start | center |flex-end | space-between | space-around | space-evenly设置项目的属性有 order:0(默认值) | <integer>flex-shrink:1(默认值) | <number>flex-grow:0(默认值) | <number>flex-basis:auto(默认值) | <length>flex:none | auto | @flex-grow @flex-shrink @flex-basisalign-self:auto(默认值) | flex-start | flex-end |center | baseline| stretch 容器属性flex-direction属性通过设置坐标轴,来设置项目排列方向.container{  flex-direction: row(默认值) | row-reverse | column | column-reverse}row(默认值):主轴横向,方向为从左指向右。项目沿主轴排列,从左到右排列。row-reverse:row的反方向。主轴横向,方向为从右指向左。项目沿主轴排列,从右到左排列。column:主轴纵向,方向从上指向下。项目沿主轴排列,从上到下排列。column-reverse:column的反方向。主轴纵向,方向从下指向上。项目沿主轴排列,从下到上排列。flex-wrap属性设置是否允许项目多行排列,以及多行排列时换行的方向.container{  flex-wrap: nowrap(默认值) | wrap | wrap-reverse}nowrap(默认值):不换行。如果单行内容过多,则溢出容器。wrap:容器单行容不下所有项目时,换行排列。wrap-reverse:容器单行容不下所有项目时,换行排列。换行方向为wrap时的反方向。justify-content属性设置项目在主轴方向上对齐方式,以及 分配项目之间及其周围多余的空间.container{  justify-content: flex-start(默认值) | flex-end | center | space-between | space-around| space-evenly} flex-start(默认值):项目对齐主轴起点,项目间不留空隙。center:项目在主轴上居中排列,项目间不留空隙。主轴上第一个项目离主轴起点距离等于最后一个项目离主轴终点距离。flex-end:项目对齐主轴终点,项目间不留空隙。space-between:项目间间距相等,第一个项目离主轴起点和最后一个项目离主轴终点距离为0。space-around:与space-between相似。不同点为,第一个项目离主轴起点和最后一个项目离主轴终点距离为中间项目间间距的一半。space-evenly:项目间间距、第一个项目离主轴起点和最后一个项目离主轴终点距离等于项目间间距。align-items属性设置项目在行中的对齐方式.container{  align-items:stretch(默认值) | flex-start | center | flex-end | baseline}stretch(默认值):项目拉伸至填满行高。flex-start:项目顶部与行起点对齐。center:项目在行中居中对齐。flex-end:项目底部与行终点对齐。baseline:项目的第一行文字的基线对齐。。align-content属性多行排列时,设置在交叉轴方向上的对齐方式,以及分配行之间及其周围多余的空间.container{  align-content: stretch(默认值) | flex-start | center | flex-end | space-between |space-around | space-evenly} stretch(默认值):当未设置项目尺寸,将各行中的项目拉伸至填满交叉轴。当设置了项目尺寸,项目尺寸不变,项目行拉伸至填满交叉轴。flex-start:首行在交叉轴起点开始排列,行间不留间距。center:行在交叉轴中点排列,行间不留间距,首行离交叉轴起点和尾行离交叉轴终点距离相等。flex-end:尾行在交叉轴终点开始排列,行间不留间距。space-between:行与行间距相等,首行离交叉轴起点和尾行离交叉轴终点距离为0。space-around:行与行间距相等,首行离交叉轴起点和尾行离交叉轴终点距离为行与行间间距的一半。space-evenly:行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等。微信小程序

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

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏