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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I have three components namely, component1, component2, middlecomponent.

All these components are loaded in app.vue. And I am able to, load all the components into one components called App.vue.

But coming to css wise. Not sure how to align them using flexbox properties in css?

CodePudding user response：

You need change your structure. the container should be flex and for alignment you can use align-items:center, also I set a gap between components.

there is no need to those class you have written.

this link can help you: 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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>