Vue.js单组件中如何对齐div？通过flexbox实现多组件布局对齐

问题核心原因 #

你当前将三个组件分别放在独立的容器中，flex属性仅作用于每个容器内部的子元素，三个父容器本身为块级元素，默认垂直排布，无法实现同行左中右对齐效果。

修正方案 #

将三个组件放入同一个flex父容器中，调整对应属性即可实现需求，可直接复用以下代码：

HTML结构 #

<!-- 统一flex父容器 -->
<div class="flex-wrapper">
  <div class="container"> <!-- component1 -->
    <div class="one">some content</div>
  </div>
  <div class="center"> <!-- middle component -->
    <div class="middle">middle content</div>
  </div>
  <div class="containertwo"> <!-- component2 -->
    <div class="two">some content</div>
  </div>
</div>

CSS样式 #

方案1：两端对齐（左组件贴左、右组件贴右，中间组件在两者中间分布）

.flex-wrapper {
  display: flex;
  width: 100%; /* 可按需调整父容器宽度 */
  align-items: center; /* 三个组件垂直方向居中，不需要可删除 */
  justify-content: space-between;
}

方案2：中间组件严格水平居中（不受左右组件宽度影响）

.flex-wrapper {
  display: flex;
  width: 100%;
  align-items: center;
}
/* 左右容器平分剩余宽度 */
.container, .containertwo {
  flex: 1;
}
.containertwo {
  display: flex;
  justify-content: flex-end;
}
.center {
  text-align: center;
}

属性说明 #

• display: flex：将父容器设为flex布局，内部直接子元素默认沿水平方向排列
• align-items：控制子元素垂直方向对齐规则，可选值包括flex-start（顶对齐）、flex-end（底对齐）等
• justify-content: space-between：控制子元素水平方向分布规则，两端贴边，剩余空间均匀分布在子元素间隙
• flex: 1：让对应容器自动填充父容器剩余宽度，保证左右容器宽度一致，实现中间组件严格居中

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