通过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

相关推荐
wuhen_n2 小时前
CSS元素动画篇:基于页面位置的变换动画
前端·css·html·css3·html5
sql123456789112 小时前
前端——CSS1
前端
Nueuis2 小时前
微信小程序分页和下拉刷新
服务器·前端·微信小程序
小白64023 小时前
前端性能优化(实践篇)
前端·性能优化
小彭努力中3 小时前
9.Three.js中 ArrayCamera 多视角相机详解+示例代码
开发语言·前端·javascript·vue.js·数码相机·ecmascript·webgl
朝阳393 小时前
Electron Forge【实战】桌面应用 —— 将项目配置保存到本地
前端·javascript·electron
若愚67924 小时前
Tauri 跨平台开发指南及实战:用前端技术征服桌面应用(合集-万字长文)
前端·vue.js·rust·gitcode
不秃的开发媛4 小时前
前端技术Ajax实战
前端·javascript·ajax
IT瘾君4 小时前
JavaWeb:后端web基础(Tomcat&Servlet&HTTP)
前端·servlet·tomcat
qq_419429134 小时前
uni-app中使用RenderJs 使用原生js
前端·javascript·uni-app