本文将介绍五种布局组件，即流式布局、弹性布局、固定布局、多行多列布局、Layout布局。
01
流式布局
流式布局也叫百分比布局，也称非固定像素布局或自适应布局。这种布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与响应式布局相补。
什么是响应式布局？
响应式布局指分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，实现不同屏幕分辨率的终端上浏览网页的不同展示方式。
流式布局的常用设计模版如下：
1、左侧固定+右侧自适应
2、左右固定宽度+中间自适应
在捷码中如何使用？
基于Layou布局组件，子组件宽高设置百分比。
02
弹性布局
弹性布局用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局，可以与栅格布局结合使用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
什么是盒状模型？
盒状模型（Box Model）是CSS中用于布局和定位元素的一种模型。它将每个HTML元素看作是一个矩形的盒子，这个盒子由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。
在捷码中如何使用？
基于FlexContainer组件使用，使用场景如下：
1、排列方向
决定主轴的方向，可通过此属性改变子元素diplay(即显示方式)。
效果：
2、对齐方式
主轴元素排列(方向)，它可能取5个值，具体对齐方式与轴的方向有关，下面假设主轴为从左到右：
效果：
3、换行
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
效果：
03
固定布局
一般用于浮于元素上方，可任意拖动位置，脱离文档流，生成固定定位的元素，相对于浏览器窗口进行定位，和absoute的区别是fixed不会跟随屏幕滚动(常见的各种贴屏广告)。
什么是文档流？
文档流（Document Flow）是指在HTML文档中元素按照其出现的顺序依次排列的过程。当浏览器解析HTML文档时，会根据元素的标签和属性确定元素在页面中的位置，并根据元素的display属性来确定元素的显示方式。
在捷码中如何使用？
基于FixedContainer、FlexContainer组件使用，适用于在默认（static）定位方式、相对（relative）定位方式、绝对（absolute）定位方式、固定（fixed）定位方式等场景下使用。
04
多行多列布局
多行多列布局本质是使元素浮动从而脱离文档流，结合css的计算属性，可以快速将页面分割成多个布局，可以实现静态布局以及自适应布局，可嵌套任意元素。
什么是静态布局？
静态布局是网页最外层容器有固定的大小，所有的内容以该容器为标准，超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。
什么是自适应布局？
自适应布局是指网页或应用程序能够根据不同设备的屏幕尺寸和分辨率自动调整布局和展示效果的一种设计方式。其目的是使用户在不同设备上可以获得更好的用户体验，无论是在桌面电脑、平板还是手机上浏览页面，内容都能以最合适的方式展示。
自适应布局常用设计模版如下：
1、固定宽度和等比布局
2、等比布局
3、百分比宽度和等比布局
在捷码中如何设置？
基于多行多列布局组件。可以设置固定像素、百分比、数值，其中数字代表该列在剩余待划分区域所占的份数，如果所有项目的值都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的值为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
05
Layout布局
Layout布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
基本结构：
或：
Layout布局容器主要应用于以下场景：
1、拥有侧边导航，区别是两边未留边距，多用于应用型的网站。
2、拥有顶部导航及侧边栏的页面，多用于展示类网站。
在捷码中如何设置？
基于Layou布局组件设置：
捷码3D多引擎组件，WebGL/UE游戏引擎一键切换，助你实现智慧城市数字孪生项目开发降本增效！ 阅读919次
捷码低代码平台，在智慧城市数字孪生方面有哪些应用？ 阅读835次
探索智慧农业案例：如何利用低代码应用—捷码，提升数字孪生平台开发效率？ 阅读693次
捷码助力矿山智能化：山西智慧矿山综合管控平台高效打造！ 阅读884次
点击“立即申请”即可成为捷码客户，将享受捷码终身技术咨询服务，和远程技术支持服务。
400-6565-277
返回列表
热门推荐
电话：400-6565-277
邮箱：gemcoder@yuantiaotech.com
地址：浙江省杭州市余杭区文一西路1217号IT公园B幢17楼
