捷码低代码｜5种常见的布局组件介绍！

在捷码中亲自体验，学习效果更好！没有账号的，点击免费获得账号：http://dev.gemcoder.com/front/development/index.html#/login

本文会介绍五种布局组件，即流式布局、弹性布局、固定布局、多行多列布局、Layout布局。

一、流式布局

流式布局也叫百分比布局，也称非固定像素布局或自适应布局。这种布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与响应式布局相补。

知识补充：

响应式布局

分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。只是布局改变，元素不变。

流式布局的常用设计模版如下：

（1）左侧固定+右侧自适应

（2）左右固定宽度+中间自适应

 在捷码中如何使用？

 基于Layou布局组件，子组件宽高设置百分比。

 

 二、弹性布局

弹性布局用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局，可以与栅格布局结合使用。布局的传统解决方案，基于盒状模型，依赖 display 属性