Flexbox : make first div center and second div align at the end

Question

I want to make a menu where the name of the menu is at the center of his parrent and the action button is at the end of the menu.

I have tried to do something like this :

.container{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    width:16rem;
    background-color:green;
    padding:1rem;
    margin-top:1rem;
}

.text{
    margin-left: auto;
    margin-right: auto;
    background-color:lime;
    padding:1rem;
}

.ico{
    height: 2em;
    width: 2em;
}

<p>What I get</p>
<div class="container">
  <span class="text">My title is a bit long</span>
  <button class="ico">IC</button>
</div>
<p>What I want with my button positioned at the end</p>
<div class="container">
  <span class="text">My title is a bit long</span>
</div>

But as you can see, the text is not exactly at the center of the div anymore.

So, how can I keep my text at the center of the div and add my button at the end?

Do you have to use flexbox? Otherwise, you can do it with float or absolute positioning. — technophyle, Jul 13 '23 at 09:58

score 0 · Accepted Answer · edited Jul 13 '23 at 14:07

Here's my suggestion:

.container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:16rem;
    background-color:green;
    padding:1rem;
    margin-top:1rem;
}

.text{
    background-color:lime;
    padding:1rem;
}

.ico, .spacer{
    flex: 0 0 2em;
    height: 2em;
    width: 2em;
}

.spacer {
    visibility: hidden;
}

<p>What I want with my button positioned at the end</p>
<div class="container">
  <div class="spacer"></div>
  <span class="text">My title is a bit long</span>
  <button class="ico">IC</button>
</div>

Here's what it gives me:

Hope that my answer helps you.

Please leave the code snippet so everyone can see the code running — Sfili_81, Jul 13 '23 at 14:07

Flexbox : make first div center and second div align at the end

1 Answers1