感谢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~)