How to use CSS's flex layout to achieve dynamic layout adjustment based on whether the element exists or not?

CSS Flex layout: dynamically adjust the page according to whether the element exists or not

Web page layout often needs to be dynamically adjusted according to whether the elements are displayed or not. This article will demonstrate how to use CSS's Flex layout to achieve this feature, ensuring that the page can maintain a good display effect under various elements combinations.

Our goal is to create a layout that meets the following situations:

1. All elements exist: "Opening a card and establishing a file" is on the left, and "Outpatient Recharge" and "Payment" are arranged vertically on the right.
2. "Card opening and file establishment" is missing: "Outpatient recharge" and "payment" are arranged vertically on the right.
3. "Outpatient recharge" is missing: "Opening a card and establishing a file" is on the left, and "payment" is on the right.
4. Missing "payment": "Opening a card and establishing a file" is on the left, and "Outpatient Recharge" is on the right.
5. Only "Open Card and File Establishment" remains: only "Open Card and File Establishment" is displayed.

By cleverly applying CSS's Flex layout, we can easily achieve the above effects. The following code shows how to implement it:

<div class="container">
  <div class="item left">Open a card and build a file</div>
  <div class="item right">
    <div class="item sub-item">Outpatient recharge</div>
    <div class="item sub-item">Pay the fees</div>
  </div>
</div>

.container {
  display: flex;
}

.item {
  /* Default style, can be adjusted as needed*/
  padding: 10px;
  border: 1px solid #ccc;
}

.left {
  flex: 1; /* Takes up free space*/
}

.right {
  flex: 1; /* Takes up free space*/
  display: flex;
  flex-direction: column; /* child elements are arranged vertically*/
  height: 80px; /* guarantee the right height*/
}

.sub-item {
  flex: 1; /* The height of the sub-elements*/
}

/* Style of hidden elements*/
.hidden {
  display: none;
}

Controlling the addition and removal of classes through JavaScript can dynamically hide elements and thus change the layout. For example, if the "outpatient recharge" element does not exist, you can add a hidden class to it. The Flex layout automatically adjusts the position and size of the remaining elements. This is a simple and efficient dynamic layout solution that is easy to understand and maintain.

The above is the detailed content of How to use CSS's flex layout to achieve dynamic layout adjustment based on whether the element exists or not?. For more information, please follow other related articles on the PHP Chinese website!