📝 前言 还在为调个页面布局熬大夜？用 float 排个版，元素到处乱跑；用 position 定个位，稍微改点东西就全乱套。不想熬夜了😭！ 别慌，今天咱们就来聊聊前端界的 “救星” — Flex 弹

整理了一下两栏布局和三栏布局的方法，包括一侧固定一侧自适应的各种方法，三栏布局包括弹性布局、浮动、定位、圣杯、双飞翼布局。

flex布局具有便捷、灵活的特点，熟练的运用flex布局能解决大部分布局问题，这里对一些常用布局场景做一些总结。 flex:0 0 25%,相当于flex-basis:25%，使得每一个列表项的宽度占外层容器(本例中的ul元素)的25%，因此每行最多能够排开四个列表项。 各大U…

从零理解 CSS 弹性布局：轻松掌控页面元素排布 如果你和我一样，刚接触前端、不太适应传统布局方式，那么 Flex 很可能会成为你的“救星”。

讲解面试常见的flex:1和flex:auto的区别。其实这两个属性的差异藏在细节里，今天我们就从 “原理拆解→场景对比→误区避坑” 三个维度，彻底搞懂它们的区别，让你在项目中不再凭感觉写代码。

Flexbox 布局中的滚动失效问题：为什么需要 min-h-0？ 前言 在使用 Flexbox 布局时，你是否遇到过这样的问题：明明设置了 overflow-y-auto，但内容却无法滚动，反而把整

上周我在带一个新人做后台管理系统的侧边栏时，他卡了整整半天——就为了实现一个顶部 logo + 中间菜单 + 底部用户信息的布局。 他试了各种方法： margin: auto 不行 position:

flex子项属性有3个：flex-grow,flex-shrink和flex-basis，分别对应增长、收缩和基准。 情况1：剩余空间分配(flex-grow) 此时，计算只需要按照grow比例直接分

经典的布局场景上下固定、中间填充剩余空间。 思路、 原理 、示例 、浏览器兼容性 Flex 布局在现代浏览器中有很好的支持（IE10+），如需兼容旧版浏览器，可考虑使用传统方法作为降级方案。