• 投稿

无废话!12分钟搞懂CSS Flex布局,彻底告别布局难题

9.5万
71
2025-11-14 20:39:03
4049
2399
7851
461
如果你总是被元素溢出、奇怪缩放、居中写半天还不对这些 CSS 布局问题困扰,这期视频会带你系统理解 Flex 布局。内容会从 display: flex; 的基础概念讲到主轴和交叉轴、对齐、换行,以及 flex-grow 和 flex-shrink 在响应式中的实际作用。 🔥 本期核心看点 ✅ 搞懂 flex container、flex item、主轴和交叉轴到底是什么 ✅ 学会 justify-content 和 align-items,轻松实现常见居中布局 ✅ 理解 flex-direction 为什么会直接影响对齐结果 ✅ 掌握 gap、flex-wrap、align-content 在多行布局里的区别 ✅ 学会用 flex-grow、flex-shrink、min-width、max-width 处理缩放和溢出问题 ✅ 了解 align-self 和 margin-right: auto; 这些非常实用的小技巧 👉 加入 Discord 交流群,请移步主页置顶动态,或私信发送暗号【交流群】 ☕️ 关于我 这里是林想的Web工坊,我会分享实用、有趣的前端与 CSS 技巧。希望帮你少走弯路,多些写代码的乐趣!如果觉得视频对你有帮助,欢迎一键三连支持一下~
全网同名 讨论群置顶动态
42.8万播放
简介
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
客服
顶部
赛事库 课堂 2021拜年纪