How to align div in single component in Vuejs? - html

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

Answer 1

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>