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
喜歡就支持一下吧
