一、Flex 布局高频问题汇总

1. flex子元素宽度被内容撑开，设置width无效

原因：flex默认子元素flex-shrink:1，内容过宽时不会自动收缩。

/* 解决方案 */
.child {
    flex-shrink: 0; /* 禁止收缩 */
    flex: 0 0 固定宽度;
}

2. 垂直居中失效常见场景

  • 父元素未设置高度，align-items:center看不出效果；
  • 子元素自身margin:auto会覆盖父级对齐方式；
  • 行内元素需要先转为flex容器。

二、Grid 布局实用踩坑

grid-template-columns百分比搭配gap时总宽度溢出问题：百分比是基于容器可用宽度，gap会额外占用空间，移动端极易横向滚动。

/* 推荐写法 */
.container{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:20px;
}

三、移动端适配经典问题

  • 忘记设置viewport导致手机缩放错乱；
  • 固定px单位在小屏显示拥挤，优先flex、百分比、rem；
  • 定位fixed在ios下偶尔抖动，搭配backdrop-filter时尽量简化层级。

四、总结

布局问题大多是盒模型、弹性收缩规则、定位上下文理解不到位，遇到错乱优先排查：box-sizing、父容器是否有多余padding/margin、定位是否形成BFC。