感谢DevUI社区贡献者 石劲 提供的优质好文！
相同点： Flex和Grid都是通过容器元素对一列子元素的布局方式进行定义
不同点： Flex是优先对一列元素进行横向或纵向布局，而Grid是同时对一列元素的横向和纵向的布局进行定义
📋 目录
📖 通过DeepSeek生成学习Demo
Flex布局和Grid布局具有许多属性参数，相信大家在查阅文档时可能会觉得难以直观地理解这些属性的作用。今天，将带领大家尝试一种全新的 CSS 学习方法，通过使用 DeepSeek 生成可交互的示例，让大家更直观地掌握这些属性。
使用MateChat接入DeepSeek，依次输入如下提示词，即可生成上图所示的Demo:
提示词1： 生成一个web前端项目，用于分别展示flex布局和grid布局的示例；页面左侧是导航，可以选择flex布局或者grid布局，页面右侧是具体的展示效果；要求flex布局和grid布局都可以用开关或下拉框进行动态配置，js，html和css代码文件要求分开
提示词2： 修改代码，让示例布局中的元素数量可以动态调整，只展示修改和新增的代码既可
提示词3： 修改代码，让flex布局中的第二个元素可以动态调整自己的flex，align-self，order属性，让grid布局中的第二个元素可以动态调整自己的grid-row和grid-column属性，并更新css的展示代码
快来尝试调整左侧配置来了解Flex和Grid布局吧~
📖 Flex布局
Flex布局（弹性盒子布局）是一种一维布局模型，用于在单个轴线上（水平或垂直）排列元素。它非常适合组件和小规模布局，通过简单的属性设置就能实现灵活的响应式布局。
Flex布局容器元素的相关样式
flex-direction
定义主轴方向（即子元素的排列方向）：
row（默认）：水平方向，从左到右row-reverse：水平方向，从右到左column：垂直方向，从上到下column-reverse：垂直方向，从下到上
flex-wrap
定义子元素是否换行：
nowrap（默认）：不换行wrap：换行，第一行在上方wrap-reverse：换行，第一行在下方
justify-content
定义子元素在主轴上的对齐方式：
flex-start（默认）：左对齐flex-end：右对齐center：居中space-between：两端对齐，项目间隔相等space-around：每个子项的两边都有相等的空间。首尾两个元素与容器边缘之间的空间是子项之间空间的一半space-evenly：每个子项之间的空间相等，包括子项与容器边缘之间的空间
align-items
定义子元素在交叉轴上的对齐方式：
stretch（默认）：拉伸填充容器flex-start：交叉轴起点对齐flex-end：交叉轴终点对齐center：交叉轴中点对齐baseline：基线对齐，可以看做flex-start和center属性效果的结合
align-content
定义多根轴线的对齐方式（flex-wrap属性是nowrap时无效）：
stretch（默认）：轴线占满整个交叉轴flex-start：交叉轴起点对齐flex-end：交叉轴终点对齐center：交叉轴中点对齐space-between：与交叉轴两端对齐space-around：每根轴线两侧间隔相等
Flex布局子元素的相关样式
flex-grow
定义子元素的放大比例，值为数字，默认为0（不放大）
flex-shrink
定义子元素的缩小比例，值为数字，默认为1（空间不足时缩小）
flex-basis
定义在分配多余空间前，子元素占据的主轴空间，默认auto（使用元素本来的宽或高）
align-self
允许单个子元素有与其他子元素不一样的对齐方式，可覆盖align-items
order
定义子元素的排列顺序，数值越小越靠前，默认为0
📖 Grid布局
Grid布局（网格布局）是二维布局系统，可以同时处理行和列。它非常适合大规模布局设计，能够创建复杂的响应式网格结构。
Grid布局容器元素的相关样式
grid-template-columns
定义列宽，例如：
grid-template-columns: 100px 100px 100px;（三列，每列100px）grid-template-columns: 1fr 2fr 1fr;（比例分配）grid-template-columns: 100px 2fr 1fr;（混合使用固定列和按比例分配）grid-template-columns: repeat(3, 1fr);（使用repeat定义重复出现的列）grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));（使用repeat和minmax根据可用空间动态定义有多少列，响应式布局超级有用）grid-template-columns: auto 100px repeat(auto-fill, minmax(100px, 1fr));（混合使用）
grid-template-rows
定义行高，语法同grid-template-columns
grid-template-areas
定义网格区域， 对不同区域进行命名，这些名字可以通过作为子元素的grid-area属性的值，定义大的页面布局时很灵活
grid-template-areas: "header header header" "sidebar main main" "footer footer footer"
justify-items
设置单元格内容的水平对齐方式（start/end/center/stretch）
align-items
设置单元格内容的垂直对齐方式（start/end/center/stretch）
Grid布局子元素的相关样式
grid-column-start
定义单个子元素起始列线位置
grid-column-end
定义单个子元素结束列线位置
grid-row-start
定义单个子元素起始行线位置
grid-row-end
定义单个子元素结束行线位置
justify-self
设置单个单元格内容的水平对齐方式，和 justify-items 属性的用法一样
align-self
设置单个单元格内容的垂直对齐方式，和 align-items 属性的用法一样
📖 Flex布局和Grid布局优缺点对比
| 特性 | Flex布局 | Grid布局 |
|---|---|---|
| 维度 | 一维（单轴） | 二维（行列同时控制） |
| 适用场景 | 线性布局，简单布局，控制灵活 | 整体页面布局、复杂网格、精确控制 |
| 学习曲线 | 较简单 | 较复杂 |
| 代码阅读性 | 代码和视图对应起来比较直观 | 需要稍微分析下代码，才能对应到视图 |
选择建议：
- 当只需要控制一行或一列的布局时，使用Flex
- 当需要同时控制行和列的布局时，使用Grid
- 两者可以结合使用，Grid用于整体布局，Flex用于内部组件布局
加入我们
DevUI团队重磅推出~前端智能化场景解决方案MateChat，为项目添加智能化助手~
源码：gitcode.com/DevCloudFE/…（欢迎star~）
