首页

投稿

无废话！7分钟彻底搞懂Flex和Grid的核心区别与选择

2.9万

102

2026-01-17 18:06:06

未经作者授权，禁止转载

你是否也曾困惑于Flex和Grid的布局选择？所谓的“一维vs二维”、“局部vs整体”让你越看越懵？这并不是你的错！这期视频，我将带你穿透表象，直击Flex“由内而外”和Grid“由外而内”的核心设计理念。你将真正理解它们的设计哲学，并学会如何基于布局意图，在不同场景下做出最合理的选择。最后，我们还会通过一个完整的响应式页面实战，帮你巩固所学知识，让你在面试和工作中都更有底气！ 🔧 本期视频资源：实战练习 - 初始版: https://codepen.io/linxiang-webcraft/pen/pvbeRJv 实战练习 - 完成版: https://codepen.io/linxiang-webcraft/pen/VYjpPYQ https://www.bilibili.com/video/BV1cbCuBqE7L/ https://www.bilibili.com/video/BV1yXqaBoEv1/

css布局教程

响应式设计

林想的Web工坊发消息

全网同名讨论群置顶动态

10分钟彻底搞懂CSS盒模型(Box Model)，告别布局烦恼！

10:06

12分钟搞懂CSS Flex布局告别布局难题

12:28

12分钟搞懂CSS Grid 一行代码实现响应式布局！

11:57

7分钟彻底搞懂Flex和Grid的核心区别与选择

07:03

3分钟搞懂 CSS 伪元素 ::before & ::after

02:50

4分钟玩转CSS定位

03:58

12分钟彻底搞懂 CSS 动画与过渡

12:05

6分钟彻底搞懂CSS em和rem，告别选择困难症！

06:26

8分钟解决你工作中99%的CSS背景图难题！

07:46

10分钟讲透CSS文档流：从BFC底层原理到外边距折叠

10:21

11分钟彻底搞懂CSS媒体查询，响应式布局其实没那么难

11:03

6分钟讲清楚CSS逻辑属性你以为在写布局，其实把方向写死了？

05:58

讲清 inline style、@layer 和 specificity

02:34

讲清 vh、svh、lvh、dvh 怎么选

03:35

绝对定位还是 CSS Grid？背景海报文字叠加到底该怎么选

04:06

Firefox DevTools 好用在哪？CSS 初学者别只用 Chrome

05:19

CSS 隐藏元素前，你需要先判断这件事

04:52

CSS 颜色表达方式：RGB、Hex、HSL、OKLCH 到底怎么选？

05:23

z-index 为什么会失效？理解 CSS Stacking Context 的核心规则

06:36

顶部