CSS动态布局：根据模块存在与否调整网页结构
网页设计中，常常需要根据不同模块的显示状态动态调整页面布局。本文将演示如何利用CSS实现此类动态布局效果，具体地，我们将探讨如何根据模块的显示/隐藏状态调整其位置和尺寸。
场景描述
假设页面包含三个模块：“开卡建档”、“门诊充值”和“缴费”。 根据这些模块的显示状态，布局需做出相应调整：
三个模块都显示时，按照特定比例布局。
“开卡建档”隐藏时，“门诊充值”和“缴费”调整位置和大小。
“门诊充值”隐藏时，“开卡建档”和“缴费”调整位置和大小。
“缴费”隐藏时，“开卡建档”和“门诊充值”调整位置和大小。
“门诊充值”和“缴费”都隐藏时，“开卡建档”独占空间。
CSS解决方案：Flexbox布局
为了实现上述动态布局，我们将使用CSS的Flexbox布局。Flexbox 提供了灵活的元素
排列
和对齐方式。以下是一个示例CSS代码：
通过JavaScript控制模块的class属性，添加或移除
类来实现模块的显示和隐藏，Flexbox会自动调整剩余模块的布局。例如：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
此方案中，
类设置
，表示每个模块默认占据1份空间，最小宽度为30%，并允许根据剩余空间进行伸缩。
允许模块在空间不足时换行。 通过JavaScript动态控制模块的显示/隐藏，Flexbox就能自动调整布局，适应不同模块组合的情况。 这是一种简洁且可扩展性强的解决方案。
.container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
}
.module {
background-color: #f0f0f0;
padding: 10px;
margin: 5px;
border: 1px solid #ccc;
flex: 1 0 30%; /* 占据1份空间，最小宽度30%，允许伸缩 */
}
/* 隐藏模块的样式处理，可以根据实际情况调整 */
.hidden {
display: none;
}
开卡建档
门诊充值
缴费
.hidden// 隐藏"门诊充值"模块
document.getElementById('recharge').classList.add('hidden');.moduleflex: 1 0 30%;flex-wrap: wrap;