html - 如何在Vuejs中对齐单个组件中的div？

Question

.container {
  display: flex;
  justify-content: left;
}

.containertwo {
  display: flex;
  justify-content: right;
}

.center {
  text-align: center
}

<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>

我有三个组件，即组件1、组件2、中间组件。

所有这些组件都加载在app.vue中。我能够将所有组件加载到一个名为 App.vue 的组件中。

但就 CSS 而言。不确定如何使用 css 中的 flexbox 属性来对齐它们？

Answer 1

你需要改变你的结构。 container 应该是 Flex 的，为了对齐，您可以使用 align-items:center，我还设置了组件之间的间隙。

不需要您编写的那些类。

此链接可以帮助您:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container {
  display: flex;
  align-items: center;
  gap: 40px;
}

<div class="container">
  <div> //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>