使用SCSS解决Flexbox布局中Logo宽度不一致导致的文本对齐问题

Hey there! I totally get that frustration—when you’ve got a clean Flexbox layout but variable-width logos throw off all your text alignment. Let’s break down exactly how to fix this so your service items look crisp and consistent, even on mobile.

The Root Problem #

Your current setup lets each logo take up as much space as it needs, so the text container starts right after whatever width that logo happens to be. To fix this, we need to force all logo containers to occupy the exact same horizontal space, regardless of the logo's actual size.

Solution 1: Tweak Your Flexbox Setup #

This is the simplest fix if you want to stick with Flexbox. We’ll give the logo a fixed width (with no shrinking/growing) and handle spacing more cleanly:

.service {
  display: flex;
  background-color: $light-grey;
  padding: 20px;
  margin-bottom: 10px;
  align-items: flex-start; /* Align logo and text to the top */
}

.service__logo {
  flex: 0 0 60px; /* Fixed width, no shrink/grow */
  margin-right: 20px; /* Space between logo and text */
  display: flex;
  align-items: center;
  justify-content: center; /* Center small logos in their container */
}

.service__text {
  flex: 1; /* Let text container fill remaining space */
}

.service__title {
  color: $primary;
}

Why This Works:

• flex: 0 0 60px locks the logo container to a fixed width—no more shifting based on logo size.
• Centering the logo inside its container keeps things visually balanced if some logos are smaller than the fixed width.
• align-items: flex-start ensures your text and logo line up at the top, avoiding vertical misalignment if logos have different heights.

Solution 2: Switch to CSS Grid (Even Cleaner!) #

Grid was made for these exact "aligned column" scenarios. It’s more intuitive for this layout and requires less code:

.service {
  display: grid;
  grid-template-columns: 60px 1fr; /* Fixed width for logo, fill rest for text */
  gap: 20px; /* Built-in spacing between columns */
  background-color: $light-grey;
  padding: 20px;
  margin-bottom: 10px;
  align-items: flex-start;
}

.service__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.service__title {
  color: $primary;
}

Why This Works:

• grid-template-columns: 60px 1fr explicitly defines your two columns: one fixed-width for logos, one flexible for text.
• The gap property handles spacing without needing margins on individual elements.
• Grid automatically keeps all logo columns aligned across every .service item—no extra work needed.

Mobile-Friendly Adjustment #

If you want to stack the logo and text on mobile, just add a media query to switch the layout:

@media (max-width: 768px) {
  /* For Flexbox solution */
  .service {
    flex-direction: column;
  }
  .service__logo {
    margin-right: 0;
    margin-bottom: 15px;
  }

  /* For Grid solution */
  .service {
    grid-template-columns: 1fr;
  }
}

Either solution will make sure your text starts at the exact same position across all service items, no matter how big or small each logo is. Pick whichever fits your existing workflow best!

内容的提问来源于stack exchange，提问作者Matěj Boháč