# 什么是布局 | Creght 可视化文档

> 选中容器，在右侧的设置栏会出现 “自动布局“ 栏目，自动布局用于控制其子元素的排布方式。 默认情况的容器没有开启” 自动布局 “，我们称之为” 自由布局 “，在这个布局模式下，其子元素可以任意拖动到任何位置： 自由布局 在网页设计中不经常使…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)帮助文档](/help.md)

[更新历史](/blogs.md)

[AI](/docs/ai/quick-create-first-website.md) [可视化](/docs/get-start.md)

入门

- [两分钟了解 Creght](/docs/get-start.md)
- [如何注册 Creght](/docs/signup.md)
- [快速制作网站](/docs/create-site.md)
- [模板](/docs/tpls.md)

设计

- [编辑器](/docs/editor.md)
- [基本操作](/docs/operating.md)
- [什么是布局](/docs/layout.md)
- [什么是定位](/docs/position.md)
- [什么是尺寸](/docs/size.md)
- [断点](/docs/breakpoint.md)
- [弹窗](/docs/popover.md)
- [组件](/docs/components.md)
- [添加第三方字体](/docs/tp-font.md)
- [副本与深拷贝](/docs/deep-copy.md)

CMS

- [内容管理 \- CMS](/docs/cms.md)
- [CMS 导入微信公众号文章](/docs/wxmp.md)

网站设置

- [页面设置](/docs/page-setting.md)
- [如何升级套餐](/docs/manage-plan.md)
- [SEO 设置](/docs/seo-setting.md)
- [小文件](/docs/verification-file.md)
- [绑定自定义域名](/docs/custom-domain.md)
- [如何进行网站备案](/docs/beian.md)
- [服务器节点说明](/docs/website-node.md)
- [如何切换站点](/docs/pxrp79jqtnyq.md)
- [多语言本地化](/docs/localization.md)

AI

- [关于 Creght AI](/docs/creght-ai.md)

工具

- [从 Figma 设计稿到可交互网站](/docs/figma-to-creght.md)
- [Figma 转响应式布局的 3 大核心指南](/docs/figma-autolayout.md)
- [Figma 设计稿一键转响应式网站](/docs/response-site.md)
- [Figma 转响应式网站-交互篇](/docs/figma03.md)
- [使用 FFmpeg 压缩视频](/docs/ffmpeg.md)
- [如何将 Clarity 添加到您的网站](/docs/clarity.md)
- [按钮 Hover 动效制作教程](/docs/button.md)
- [响应式导航栏制作教程](/docs/nav.md)
- [折叠面板](/docs/collapse.md)

设计/

# 什么是布局

选中容器，在右侧的设置栏会出现 “自动布局“ 栏目，自动布局用于控制其子元素的排布方式。

默认情况的容器没有开启” **自动布局**“，我们称之为” **自由布局**“，在这个布局模式下，其子元素可以任意拖动到任何位置：

![image.png](https://fsb.huglight.cn/b9960284f0e8ff498d80d66b9f04a72b/image.png)

**自由布局** 在网页设计中不经常使用，因为 **自由布局** 对响应式不友好，只会在局部（比如一个复杂的 icon）小范围使用。

> 什么是 ”响应式设计“？
>
> 响应式 Web 设计是一种能够适应不同设备和屏幕尺寸的网站设计方法，它可以提供一致的用户体验，并确保网站内容在任何设备上都能够完整显示和易于使用。

在网页设计中用得更多的是“ **自动布局**“，也就是 CSS 概念中的 [流式布局](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow)，在流式布局中所有子元素会从左到右（或从上到下）依次排列，这也是响应式设计的基础。

![image.png](https://fsb.huglight.cn/b4f68dda627094980db44ca9847c751c/image.png)

打开自动布局之后，自动布局栏目会出现许多选项，现在我们详细介绍每个选项的作用

### 弹性布局

自动布局分为两种，即” **弹性布局**“和” **网格布局**“，我们先说” **弹性布局**“的使用场景以及每个选项的作用。

“ **弹性布局**“ 是最常用的布局方式，其可以方便的控制子元素大小，例如下图中的左右布局，左侧固定为 120px，右侧填充满整个窗口的布局方式就需要用到弹性布局：

![image.png](https://fsb.huglight.cn/27e264e8466ebae2cc4efca7769f01cb/image.png)

设置项说明：

**方向（Direction）**

选项：水平、垂直

![image.png](https://fsb.huglight.cn/a87d9e04c3d8ad7b76253e0e98008ada/image.png)

**分布（Distribute)：元素在主轴上的对齐方式**

什么是主轴：如果是水平布局，主轴为 X 轴；如果是垂直布局，主轴为 Y 轴；

以下的示例以水平布局为例

![image.png](https://fsb.huglight.cn/1d165a070cabe1477a77dd9dba4fab61/image.png)

**对齐（Align)：元素在交叉轴上的对齐方式**

什么是交叉轴：和主轴互相垂直的轴就是交叉轴，即 如果是水平布局，交叉轴为 Y 轴；如果是垂直布局，交叉轴轴为 X 轴；

以下的示例以水平布局为例（控制 Y 轴方向上的对齐方式）

![image.png](https://fsb.huglight.cn/511fdcf1d7863df56472b8a359c0f8bf/image.png)

**间隔（Gap）**

间隔用于控制每个子元素之间的距离

![image.png](https://fsb.huglight.cn/a98edb1fe8d1835e7cd3096a761764bf/image.png)

**换行（Wrap）**

控制当子元素宽度超过父级时元素是否自动换行。

![image.png](https://fsb.huglight.cn/424bd6fe3aebeb9a8364977815f134fa/image.png)

更多参考资料：《 [**通过动图学习 CSS Flex**](https://segmentfault.com/a/1190000019387626)》

### 网格布局

网格布局用于做一些更复杂的错位的布局

![image.png](https://fsb.huglight.cn/9dd8293617f1f95df26297f3bfc26969/image.png)

设置项说明：

**列数（Columns）：分为几列**

**行数（Rows）：分为几行**

**间隔（Gap）：格子之前的间隔**

**高级布局**

高级布局用于更为特殊的场景，通常不会使用到，这里简单描述下各个功能项的作用，如果您有疑问可以直接在 ”联系我们“ 页面添加人工客服，我们为您在线解答。

![image.png](https://fsb.huglight.cn/97c55488132ff68a27dc0fb0f090f22a/image.png)

- 列数（Columns）auto：一般搭配子项固定宽度，父容器的宽度自适应的情况
- 宽度（Width）：表示网格的宽度设置
  - 最小（min）：表示网格的宽度最小为50px；
  - 固定：表示固定宽度
- 高度（Height）：表示网格的高度设置
  - 填充容器（Fill container）表示网格的高度填充容器的高度；
  - 固定：表示固定高度；
  - 适配内容：表示网格的高度为内容的高度
- 对齐（Align）：子元素在容器里面的水平位置(左中右)，比如下面的例子中，网格容器一共分为 6 列，子元素只有 3 个，一共占 3 列，就可以通过设置对齐方式更改子元素得水平位置。

![image.png](https://fsb.huglight.cn/2597a3a1c99758075a0a0d8797e7835c/image.png)

- 排列顺序（AutoFlow）：设置容器下的子容器排列顺序

![image.png](https://fsb.huglight.cn/0987693308d6b3ea1502678b009a24ae/image.png)

**Grid 布局下的子项 - 跨度**

当选中网格布局下的子项，会有特殊的尺寸设置 \- 跨度： **控制自己跨几行或几列。**

![image.png](https://fsb.huglight.cn/1079b83fd5d9ed066203a073c178083c/image.png)

本文目录

- [弹性布局](#弹性布局)
- [网格布局](#网格布局)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

此网站使用 [Creght](/) 创建

![微信客服](https://fsu.creght.com/site/2066727200882692096/1785119134612__image.png)

微信客服

## 链接

- [价格](/price.md)
- [解决方案](/solution.md)
- [客户案例](/customers.md)
- [帮助中心](/help.md)
- [联系我们](/contact.md)
- [更新记录 & 博客](/blogs.md)
- [退款说明](/tuikuan.md)

## 资源

- [全部资源](/resources.md)
- [模板](/templates.md)
- [组件库](https://creghtlib.site.creght.com)
- [动效库](/design/effects.md)
- [Figma to Creght](/figma2creght.md)
- [API](/api.md)

## 产品对比

- [对比上线了](/creght-vs-sxl.md)
- [对比凡科建站](/creght-vs-fkw.md)
- [自己写代码 vs Creght](/compare/self-coding.md)
- [外包 vs 自己做](/compare/outsourcing.md)

## 协议

- [用户协议](/legal/terms.md)
- [隐私政策](/legal/privacy.md)
- [可接受使用政策](/legal/acceptable-use.md)

## 社交媒体

- [小红书](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [哔哩哔哩](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)