参考资料

  1. CSS弹性盒子详细说明以及案例
  2. css样式div居中
  3. 如何添加按钮的过渡动画效果？
  4. 颜色属性详细说明以及案例
  5. flex-wrap: wrap/nowrap详细说明
  6. css文字阴影属性
  7. 子选择器详细说明以及案例
  8. 伪元素选择器详细说明以及案例

如何调试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：属性项目工具容器元素常用浏览器开发者边框高亮