参考资料

  1. display: flex/inline-flex示例
  2. 动态伪类选择器详细说明以及案例
  3. 如何优化过渡动画的性能？
  4. ui状态伪类选择器详细说明以及案例
  5. 多重选择器详细说明以及案例
  6. 边框属性详细说明以及案例
  7. 目标伪类选择器详细说明以及案例
  8. CSS有哪些常用的选择器？

如何调试Flex布局问题？

  1. 检查容器和项目属性

  • 确保父元素设置 display: flex

  • 检查 flex-direction (默认row)

  • 检查 flex-wrap (默认nowrap)

  1. 常用调试工具

  • 浏览器开发者工具

  • 使用边框高亮：* { border: 1px solid red; }

  1. 常见问题示例

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
/* 问题：项目不换行 */
.container {
  display: flex;
  width: 200px;
}

/* 解决方案 */
.container {
  flex-wrap: wrap;
}

/* 问题：项目宽度不均 */
.item {
  flex: 1; /* 均分空间 */
}

/* 问题：垂直对齐 */
.container {
  align-items: center; /* 交叉轴居中 */
}

  1. 关键属性调试

  • justify-content (主轴对齐)

  • align-items (交叉轴对齐)

  • flex-grow/shrink/basis (项目伸缩)

  1. 响应式调试

  • 使用 @media 查询调整不同尺寸下的flex属性

TAG：属性项目工具容器元素常用浏览器开发者边框高亮