参考资料

1. css div居中代码
2. align-items: flex-start/end详细说明
3. 动态伪类选择器详细说明以及案例
4. css阴影效果怎么设置
5. 哪种布局方式更适合移动端？
6. css布局格式
7. 伪类选择器详细说明以及案例
8. id选择器详细说明以及案例

如何避免Flex容器高度塌陷？

1. 设置固定高度

   .flex-container {
     display: flex;
     height: 300px; /* 固定高度 */
   }

2. 使用min-height

   .flex-container {
     display: flex;
     min-height: 200px; /* 最小高度 */
   }

3. 设置align-items属性

   .flex-container {
     display: flex;
     align-items: stretch; /* 默认值，子项拉伸填充高度 */
   }

4. 子项设置高度

   .flex-item {
     height: 100%; /* 子项继承容器高度 */
   }

5. 使用flex-grow

   .flex-item {
     flex-grow: 1; /* 子项扩展填充剩余空间 */
   }

6. 清除浮动（如果存在浮动元素）

   .flex-container::after {
     content: "";
     display: table;
     clear: both;
   }

示例：

<div class="flex-container" style="display: flex; min-height: 200px;">
  <div class="flex-item" style="flex-grow: 1; background: lightblue;"></div>
</div>