Flex-Basis不生效求助：如何实现三元素按20%/20%/60%响应式布局

Hey there! Let's figure out why your flex-basis settings aren't taking effect and get that 20%/20%/60% horizontal layout working (with automatic vertical wrapping on small screens). Here's the breakdown and solution:

Common Reasons flex-basis Fails #

First, let's cover the most likely issues blocking your flex layout:

• Parent container isn't a flex container: If the parent of your three elements doesn't have display: flex, none of the flex properties (including flex-basis) will work.
• Missing flex-wrap: wrap: Without this, your elements won't wrap to vertical when the window shrinks—they'll just get squeezed together.
• Default flex-shrink: 1: Flex items automatically shrink to fit the container by default, which can override your flex-basis values entirely.
• Unaccounted padding/borders: If your items have padding or borders, the default box-sizing: content-box will make their total width exceed your percentage values, breaking the layout.

Step-by-Step Fix #

Let's apply these fixes to your HTML structure. Here's the corrected CSS tailored to your code:

CSS Code #

/* Turn the parent section into a flex container with wrapping */
.number2 {
  display: flex;
  flex-wrap: wrap;
  /* Optional: Add gap for clean spacing between items */
  gap: 1.5rem;
}

/* Style each flex item with targeted width rules */
.number2 > .white {
  /* Shorthand: flex-grow | flex-shrink | flex-basis */
  flex: 0 0 20%;
  box-sizing: border-box; /* Ensures padding/borders don't break the set width */
}

.number2 > .two {
  flex: 0 0 20%;
  box-sizing: border-box;
}

/* Replace .three with your third element's actual class */
.number2 > .three {
  flex: 0 0 60%;
  box-sizing: border-box;
}

What This Does: #

1. display: flex: Converts .number2 into a flex container, making its direct children eligible for flex properties.
2. flex-wrap: wrap: Forces items to wrap to a new row when the container's width can't fit all items horizontally.
3. flex: 0 0 20%: This shorthand is more reliable than setting flex-basis alone:
   • 0 for flex-grow: Items won't expand beyond their set width.
   • 0 for flex-shrink: Items won't shrink below their set width.
   • 20%/60% for flex-basis: Sets the base width of each item as intended.
4. box-sizing: border-box: Ensures any padding or borders on your items are included in the 20%/60% width, preventing unexpected overflow.

Verify Your HTML Structure #

Double-check that your three elements are direct children of .number2—if they're nested inside other elements, they won't be recognized as flex items. Your complete HTML should look something like this:

<section class="number2">
  <h2 class="white">The Scoville Scale</h2>
  <article class="two">The Scoville Unit (SHU) scale is a method of quantifying a substance's 'spiciness'...</article>
  <article class="three">Your third element content here...</article>
</section>

That should get your layout working exactly as you want: horizontal with the specified widths on large screens, and vertical when the window is too small to fit all items side-by-side.

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