通过DeepSeek学CSS - Flex和Grid布局优缺点对比

感谢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-startcenter 属性效果的结合

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布局
维度 一维(单轴) 二维(行列同时控制)
适用场景 线性布局,简单布局,控制灵活 整体页面布局、复杂网格、精确控制
学习曲线 较简单 较复杂
代码阅读性 代码和视图对应起来比较直观 需要稍微分析下代码,才能对应到视图

选择建议:

  1. 当只需要控制一行或一列的布局时,使用Flex
  2. 当需要同时控制行和列的布局时,使用Grid
  3. 两者可以结合使用,Grid用于整体布局,Flex用于内部组件布局

加入我们

DevUI团队重磅推出~前端智能化场景解决方案MateChat,为项目添加智能化助手~

源码:gitcode.com/DevCloudFE/...(欢迎star~)

官网:matechat.gitcode.com

相关推荐
zhougl9961 小时前
html处理Base文件流
linux·前端·html
花花鱼1 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_1 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
xinxiyinhe5 小时前
GitHub上英语学习工具的精选分类汇总
人工智能·deepseek·学习英语精选
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!6 小时前
优选算法系列(5.位运算)
java·前端·c++·算法