CSS Flex 布局：根据元素存在与否动态调整页面
网页布局常常需要根据元素的显示与否进行动态调整。本文将演示如何利用 CSS 的 Flex 布局实现这一功能，确保页面在各种元素组合下都能保持良好的显示效果。
我们的目标是创建一个布局，满足以下几种情况：
- 所有元素存在: “开卡建档”在左侧，“门诊充值”和“缴费”在右侧垂直排列。
- 缺少“开卡建档”: “门诊充值”和“缴费”在右侧垂直排列。
- 缺少“门诊充值”: “开卡建档”在左侧，“缴费”在右侧。
- 缺少“缴费”: “开卡建档”在左侧，“门诊充值”在右侧。
- 仅剩“开卡建档”: 只显示“开卡建档”。
通过巧妙运用 CSS 的 Flex 布局，我们可以轻松实现上述效果。以下代码展示了如何实现：
<div class="container">
<div class="item left">开卡建档</div>
<div class="item right">
<div class="item sub-item">门诊充值</div>
<div class="item sub-item">缴费</div>
</div>
</div>
.container {
display: flex;
}
.item {
/* 默认样式，可根据需要调整 */
padding: 10px;
border: 1px solid #ccc;
}
.left {
flex: 1; /* 占据可用空间 */
}
.right {
flex: 1; /* 占据可用空间 */
display: flex;
flex-direction: column; /* 子元素垂直排列 */
height: 80px; /* 保证右侧高度 */
}
.sub-item {
flex: 1; /* 子元素均分高度 */
}
/* 隐藏元素的样式 */
.hidden {
display: none;
}
通过 JavaScript 控制 class 的添加和移除，即可实现动态隐藏元素，从而改变布局。例如，如果“门诊充值”元素不存在，则可以为其添加 hidden 类。 Flex 布局会自动调整剩余元素的位置和大小。 这是一种简洁高效的动态布局解决方案，易于理解和维护。
立即学习“前端免费学习笔记（深入）”；
