咨询Flex布局换行后内容居中对齐实现方式——页面标题与评分模块的移动端适配

Got it, let's tackle this Flex layout challenge. The goal is to keep the title left-aligned and ratings right-aligned when there's enough space, but center both elements once the title gets long enough to trigger a wrap (and ensure this works seamlessly on mobile too).

The Smart Flex Trick (No Media Queries Needed!) #

We can pull this off with a simple combination of container and element styles that leverages Flex's built-in behavior. Here's the breakdown:

• When both elements fit in one row: A margin-right: auto on the title will push the ratings module all the way to the right, mimicking the space-between effect you want.
• When the title is too long to fit alongside the ratings: The title wraps to its own row, and since the container uses justify-content: center, both elements will automatically center on their respective rows.

Full Working Code #

CSS

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem; /* Optional: Adds clean spacing between elements (adjust as needed) */
}

.title, .ratings-and-stars {
  border: 3px solid red;
}

.title {
  margin-right: auto; /* Key line to push ratings right when elements are in one row */
}

.ratings-and-stars {
  text-align: right;
}

/* Optional: Constrain container width for larger screens */
.flex-container {
  max-width: 1200px;
  margin: 0 auto;
}

HTML

<div class="flex-container">
  <div class="title">Longer Page Title</div>
  <div class="ratings-and-stars">
    <div class="ratings">10</div>
    <div class="stars">**********</div>
  </div>
</div>

Why This Works #

• justify-content: center ensures any wrapped elements sit centered on their rows.
• margin-right: auto on the title consumes all available space to its right, forcing the ratings module to the far right when both elements fit in a single row.
• This approach is fully responsive by default—on mobile, the title will wrap automatically, and both elements will center without extra media query hacks.

Bonus: Prevent Ratings from Getting Squished #

If you want to guarantee the ratings module never gets cramped, add a min-width to it:

.ratings-and-stars {
  text-align: right;
  min-width: 80px; /* Adjust based on your actual content size */
}

This ensures the ratings have consistent space, and the title will wrap as soon as it can't fit alongside this minimum width.

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