双元素容器布局实现：宽屏两端对齐、换行后居中且无需媒体查询

Great question! I’ve run into this exact layout scenario before, and the key is leveraging flexbox’s auto margin behavior paired with centered justification—no media breakpoints needed. Let’s break down the perfect solution:

Flexbox Implementation #

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem; /* Optional: Adds consistent spacing between items */
}

.container > div:first-child {
  margin-right: auto;
}

How It Meets All Your Requirements: #

• Wide container environment: The margin-right: auto on the first element pushes the second element all the way to the right edge of the container, creating the "两端对齐" (space-between) effect you need.
• Narrow container environment: When the two elements can’t fit on one line, flex-wrap: wrap automatically moves the second element to a new row.
• Two-row state: Since we set justify-content: center on the container, both elements will be centered in their respective rows once wrapped—no extra adjustments needed.

Why This Works Over Your Initial Attempt #

Your original justify-content: space-between worked for wide layouts, but it caused wrapped items to stick to the left/right edges instead of centering. By switching to justify-content: center and using an auto margin on the first item, we get the best of both worlds: wide-layout spacing and wrapped-layout centering, all without media queries.

Alternative Grid Layout (Bonus) #

If you prefer Grid, here’s another approach that achieves the same result:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(max-content, 100%), 1fr));
  justify-items: center;
  gap: 1rem;
}

.container > div:first-child {
  justify-self: start;
}

.container > div:last-child {
  justify-self: end;
}

The auto-fit and minmax combination lets the grid adapt to container width. When space is tight, the grid collapses to a single column, and justify-items: center takes over to center both elements. When space allows, the two columns appear, with the first item left-aligned and the second right-aligned.

内容的提问来源于stack exchange，提问作者tim-mccurrach