能否仅用CSS与媒体查询实现两种指定多列Flexbox布局的切换？

Absolutely! You can absolutely build and switch between these two Flexbox layouts using nothing but CSS and media queries—no JavaScript required. Let me break down a working implementation for you:

Step 1: Basic HTML Structure #

First, we'll set up a simple container with our three modules:

<div class="container">
  <div class="module module-a">Module A</div>
  <div class="module module-b">Module B</div>
  <div class="module module-c">Module C</div>
</div>

Step 2: Base CSS Styles #

We'll start with foundational styles to set up the Flexbox container and module defaults:

/* Reset box-sizing to avoid width issues */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-height: 100vh; /* Give the container a full viewport height for layout consistency */
}

.module {
  padding: 2rem;
  border: 2px solid #2d3748;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: bold;
}

Step 3: Layout v1 (Default/Small Screens) #

This is our initial layout where A and B take 50% width each, and C spans 100%:

/* Layout v1: Mobile-first default */
.module-a, .module-b {
  flex: 0 0 50%; /* Fixed 50% width, no growing/shrinking */
  min-height: 50vh; /* Each takes half the viewport height */
}

.module-c {
  flex: 0 0 100%; /* Full width */
  min-height: 50vh;
}

Step 4: Layout v2 (Larger Screens, Triggered by Media Query) #

When the screen hits our breakpoint (we'll use 768px as an example), we switch to the second layout where A takes the combined size of A+B, and B/C each take 50% width:

/* Layout v2: Triggered on screens ≥768px */
@media (min-width: 768px) {
  .container {
    flex-direction: column; /* Switch to vertical flex layout */
    flex-wrap: wrap; /* Allow items to wrap to the next column */
    height: 100vh; /* Fixed height to force wrapping */
  }

  .module-a {
    flex: 0 0 100%; /* Takes the full height of the container (equal to A+B's combined height in v1) */
    width: 50%; /* 50% width */
    min-height: auto; /* Override v1's min-height */
  }

  .module-b, .module-c {
    flex: 0 0 50%; /* Each takes half the container height */
    width: 50%; /* 50% width */
    min-height: auto; /* Override v1's min-height */
  }
}

Key Notes: #

• We use a mobile-first approach here, with Layout v1 as the default and Layout v2 activating on larger screens (you can reverse this by using max-width in the media query if needed).
• The trick for Layout v2 is switching the container to flex-direction: column with flex-wrap: wrap, which lets items wrap into columns once they exceed the container's fixed height.
• box-sizing: border-box ensures padding and borders don't affect our defined width/height values.

内容的提问来源于stack exchange，提问作者Toni Producto