Flexbox布局疑问：如何实现图文并排？是否需改用Grid？

1. HTML结构要求 #

只要你的每个菜单项是用独立容器包裹图片+文本模块，就完全支持目标布局。如果当前结构不符合，先调整成类似下面的嵌套结构：

<div class="menu">
  <div class="menu-item">
    <img src="dish-img.jpg" alt="菜品名称">
    <div class="item-details">
      <h3>招牌红烧肉</h3>
      <p>精选五花肉，慢炖2小时入味</p>
      <span class="price">¥68</span>
    </div>
  </div>
  <!-- 重复更多菜单项 -->
</div>

2. 用Flexbox实现图文并排（无需换Grid） #

Flexbox完全能搞定这个需求，代码示例：

/* 菜单整体容器：控制多行排列 */
.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 菜单项之间的间距 */
  padding: 20px;
}

/* 单个菜单项：设置为flex容器实现图文并排 */
.menu-item {
  display: flex;
  align-items: center; /* 图文垂直居中对齐 */
  gap: 15px; /* 图与文字的间距 */
  width: calc(50% - 10px); /* 每行放2个，减去gap的一半 */
  border: 1px solid #f0f0f0;
  padding: 12px;
  border-radius: 8px;
}

/* 菜品图片固定尺寸 */
.menu-item img {
  width: 75px;
  height: 75px;
  object-fit: cover; /* 保持图片比例不拉伸 */
  border-radius: 50%; /* 可选，做成圆形图 */
}

/* 文本模块占满剩余空间 */
.item-details {
  flex: 1;
}

如果想要图右文左，给.menu-item加flex-direction: row-reverse即可。

3. 要不要改用Grid？ #

如果只是普通的图文并排+多行排列，Flexbox足够简洁好用。只有当你需要更复杂的网格布局（比如某几个菜单项占2列，或者精确控制行列对齐）时，Grid才更有优势。

4. 常见问题修复 #

• 图文没并排：检查.menu-item是否设置了display: flex，有没有误加flex-direction: column
• 对齐歪了：用align-items（垂直）、justify-content（水平）调整，避免给子元素加不合理的固定宽度
• 不换行：给.menu加flex-wrap: wrap，同时给.menu-item设置合适的宽度（百分比或固定值）

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