如何用Flexbox对齐Div内容？Flex项目价格列对齐求助

先梳理你当前代码的核心问题：

• 主容器的子div统一设置width:65%，导致所有列宽度异常，挤压布局
• 价格列内部元素缺少垂直排列的布局设置，无法实现参考图的居中对齐效果
• 主容器的align-content:center属性无效，它仅作用于多行flex容器，当前主轴为水平方向且只有一行，应使用align-items

以下是修改后的完整代码及逻辑讲解：

修改后的HTML #

<div id="main-container">
  <!-- 给价格列添加类名，方便单独设置样式 -->
  <div class="price-column">
    <h1>10.99</h1>
    <p>USD/DAY</p>
    <button>SELECT</button>
    <p>Total 76.93 USD</p>
  </div>
  <div class="column">car image</div>
  <div class="column">capacity</div>
  <div class="column">features</div>
</div>

修改后的CSS #

#main-container {
  display: flex;
  background-color: rgb(24, 30, 30);
  margin-top: 1%;
  /* 让子列水平均匀分布 */
  justify-content: space-around;
  /* 让子列在垂直方向居中（需给容器设置高度） */
  align-items: center;
  width: 65%;
  /* 设置容器高度，才能看到垂直居中效果 */
  height: 80vh;
  font-size: 1.5vmin;
}

/* 统一设置所有列的基础样式 */
#main-container .column,
#main-container .price-column {
  background-color: bisque;
  /* 让每列宽度自适应，且占比均匀 */
  flex: 1;
  /* 列的最小宽度，避免挤压过窄 */
  min-width: 120px;
  height: 90%;
  border-radius: 8px;
}

/* 单独设置价格列的内部布局 */
.price-column {
  /* 内部元素垂直排列 */
  display: flex;
  flex-direction: column;
  /* 内部元素垂直方向均匀分布 */
  justify-content: space-evenly;
  /* 内部元素水平居中 */
  align-items: center;
  padding: 1rem;
}

#main-container button {
  color: white;
  background-color: #117CC0;
  /* 按钮样式优化 */
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: inherit;
}

#main-container h1 {
  font-size: 3em;
  margin: 0;
}

#main-container p {
  margin: 0;
  opacity: 0.8;
}

核心逻辑讲解 #

1. 主容器布局：

   • 设置height是为了让align-items:center生效，让所有子列在垂直方向居中
   • 用justify-content:space-around替代原有的justify-content:center，让四列之间的间距更均匀，匹配7行4列的布局预期

2. 列的统一样式：

   • flex:1让每列自动分配主容器的宽度，保证四列宽度一致
   • min-width避免列被过度挤压，保证内容可读性
   • border-radius让列的样式更贴近常见的卡片式布局

3. 价格列内部布局：

   • 给价格列单独设置display:flex和flex-direction:column，让内部的价格、文字、按钮垂直排列
   • justify-content:space-evenly让内部元素在垂直方向均匀分布，避免堆叠拥挤
   • align-items:center让所有内部元素水平居中，符合参考图的对齐效果

4. 细节优化：

   • 去掉h1和p的默认margin，消除多余间距
   • 给按钮添加padding和border-radius，优化视觉体验
   • 放大h1字体，突出价格的核心展示地位

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