如何使用CSS的flex布局实现根据元素存在与否的动态布局调整？-css教程-PHP中文网

如何使用CSS的flex布局实现根据元素存在与否的动态布局调整？

心靈之曲

发布： 2025-03-24 12:28:11

原创

457人浏览过

如何使用css的flex布局实现根据元素存在与否的动态布局调整？

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 布局会自动调整剩余元素的位置和大小。这是一种简洁高效的动态布局解决方案，易于理解和维护。

立即学习“前端免费学习笔记（深入）”；

以上就是如何使用CSS的flex布局实现根据元素存在与否的动态布局调整？的详细内容，更多请关注php中文网其它相关文章！