打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
会员管理实战教程11-布局介绍

前言


低码工具更侧重于前端开发,学习前端开发必须熟练掌握CSS的相关知识。本篇就重点介绍一下在低码中的布局相关知识。

一、网格布局


网格布局可以和word里的表格做同类型联系,比如我在word里插入一个表格。

一共是插入了一行12列,而网格布局里的属性可以自由选择,第一个12就代表着一行一列

一行一列自然就只有一个插槽,这个插槽就是我们可以添加内容的容器,里边可以放图片、文本、普通容器这些组件。

如果选择6:6就表示一行两列,可以有两个插槽

至于列比例如何选择要根据你的页面的设计决定。

什么时候选择网格布局比较好,一般在首页像那种有功能导航的,比较适合网格布局。因为功能是确定的,你可以决定一行放几个布局。如果像商品列表,那种要根据商品的数量来决定显示几行的,就不太适合网格布局。

二、flex布局


flex布局也叫流式布局,可以想象像水流一样,从左到右流,到了边缘又到下一行从左到右流。

因为有了这个流动的方向,自然就有了水平和垂直的概念,通过水平和垂直来决定你里边的容器的摆布。比如你希望元素水平居中对齐,垂直居中对齐,就可以靠这两个方向的对齐方式来进行布局。

那flex布局通常用在哪个组件上呢?通常用在普通容器上,由普通容器来决定里边的元素的摆放位置。

三、布局的元素


除了上述两个布局组件外,在布局组件里最常使用的两个组件是图片和文本

图片组件一般用来显示素材,我们需要的素材一般都放置在素材库里

需要将设计师制作的各种素材添加进来方便组件进行设置和引用

图片组件的图片地址属性可以通过从素材库里选择素材进行设置

选择了之后会自动显示图片

图片组件的话日常需要设置合适的宽和高,让图片的显示和设计图一样

文本组件的话常常设置文本的内容

除了文本内容外还可以设置对齐方式和颜色。

四、总结


以上就是低码中常用的布局组件,一般将这四个组件用熟练了,大部分的布局都可以搭建出来。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
react-native 之布局篇
如何用一行 CSS 实现 10 种现代布局
【AS3 Coder】任务二:了解Flex组件生命周期
Flex编程模型
Flex Builder教程
dispaly的Grid布局与Flex布局
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服