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

布局(容器的属性)

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

一、容器的属性以下6个属性设置在容器上。flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content注意:使用每个属性都记得开启display:flex; 盒子伸缩模式,默认左浮动。1、flex-direction明确排列起点继续添加元素的排列的方向,分水平排列和垂直排列案例(1)、起点在左端(row),继续添加元素时往右边排列。(2)、起点在右端(row-reverse),继续添加元素时向左排列。(3)、起点在上沿(column),继续添加元素时往下排列。(4)、起点在下沿(column-reverse),继续添加元素时向上排列。2、flex-wrap默认情况下<view></view>标签直接包裹着的每个元素都要换行显示。2.1、文本——没有空格(1)、不换行默认(nowrap)(2)、换行,第一行在上方(wrap)(3)、换行,第一行在下方(wrap-reverse)2.2、文本——有空格(1)、不换行默认(nowrap)(2)、换行,第一行在上方(wrap)同上(3)、换行,第一行在下方(wrap-reverse)同上2.3、组件按钮默认换行显示,这里调整成不换行显示。下面是研究组合左浮动效果:给外层加上类d 3、flex-flowflex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。此处表示由下至上,不换行排列。 4、justify-content(项目在主轴上的对齐方式)flex-start(默认值):左对齐flex-end:右对齐center: 居中space-between:两端space-around:项目两侧的间隔相等(1)、默认左对齐(flex-start)(2)、居中(center)(3)、右对齐(flex-end)(4)、两端对齐,项目之间的间隔都相等(space-between)(5)、每个项目两侧的间隔相等(space-around) 5、align-items(项目在交叉轴上的对齐方式)flex-start(默认值):左对齐flex-end:右对齐center: 居中baseline: 项目的第一行文字的基线对齐。stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。(1)、默认左对齐(flex-start)(2)、居中(center) (3)、右对齐(flex-end)(4)、基线对齐(baseline)(5)、沾满(stretch)  6、align-content(多根轴线的对齐方式)  微信小程序

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

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏