技术博客
Grid 适合定义整体结构（比如页面分栏、卡片网格），Flex 适合单行/列内的元素对齐与分布。如果把 display: flex 容器作为 display: grid 的直接子项，通常没问题；但反过来——在 display: flex 容器里嵌套 display: grid 子项，只要不破坏 flex 主轴方向的流式逻辑，也完全可行。关键看层级职责：外层定区域，内层调细节。
absolute 定位元素根本不受 flex-shrink 控制——它压根就不是 flex 项目，所以调这个属性毫无意义。
当父容器设了 display: flex，子元素又全是 flex 项（比如没设 height 或内容为空），浏览器很可能把它算成 0 高度——不是 bug，是规范里明确写的：弹性容器的**自动高度不继承子项的“块级”尺寸逻辑**，它只看自身内容盒（content box）的固有尺寸，而 Flex 子项默认不贡献这个尺寸。
直接写flex: 1并不等于“均分”，它其实是flex: 1 1 0的简写，表示「可放大、可缩小、基准宽为0」。这意味着所有设了flex: 1的子项会平分剩余空间（不是父容器总宽），而内容本身不占空间时，它们才看起来等宽。
用 CSS Grid 实现商品列表的多列排版，核心是把容器设为 display: grid，再通过 grid-template-columns 控制列数和宽度，配合 gap 控制间距，简洁又响应灵活。
多数情况下用 justify-content: space-between 或 justify-content: flex-start，但得看菜单是否固定宽度、是否有 logo/搜索框等附加元素。如果只是纯菜单项水平铺开，space-between 容易让首尾项贴边、中间留空过大；更可控的是 flex-start 配合 margin 手动调间距。
要让 ::after 伪元素居中，关键不是直接对伪元素本身设置 text-align: center（它不生效），而是利用其父元素的文本对齐 + 行内级布局特性来实现。最常用且可靠的方式就是结合 display: inline-block 和 text-align: center。
要让多个元素在 Flex 容器中水平居中，并且彼此之间、与容器边缘保持均匀间距，justify-content: space-around 是一个常用选择，但它其实不是“严格居中”，而是“平均分配剩余空间”，需注意细节。
图片和文字使用 float 出现错位时，主要是因为默认的基线对齐方式和浮动元素的块级特性导致垂直方向没有对齐。虽然 float 本身不支持直接的垂直居中控制，但结合 vertical-align 和一些布局技巧可以有效微调对齐效果。
图片在 Flex 布局中默认不会等比例缩放，常出现拉伸、裁切或溢出，核心原因是 img 元素本身是替换元素，其尺寸行为受父容器 flex 项的默认伸缩规则（flex-shrink: 1）和自身固有宽高共同影响。解决的关键在于明确控制图片的“内容呈现方式”与“容器空间分配”，而非仅靠 width/height 硬设。