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

参考资料

1. 类选择器详细说明以及案例
2. CSS有哪些常用的选择器？
3. CSS弹性盒子详细说明以及案例
4. flex-wrap: wrap/nowrap详细说明
5. CSS网格详细说明以及案例
6. 如何用Flex布局实现导航栏？
7. css div居中对齐方式
8. 后代选择器详细说明以及案例

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>

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。