参考资料

1. css中div居中详细说明
2. CSS网格详细说明以及案例
3. 使用CSS Grid和Flexbox两种现代布局方式实现4列12个产品布局的方法
4. 如何提高Flex布局的性能？详细说明
5. css阴影效果属性
6. css3阴影效果
7. css文字阴影属性
8. 动态伪类选择器详细说明以及案例

如何避免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>