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 布局会自动调整剩余元素的位置和大小。 这是一种简洁高效的动态布局解决方案，易于理解和维护。
立即学习“前端免费学习笔记（深入）”；
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
喜欢就支持一下吧
相关推荐
