Align center and right with flex?

Question

I'm trying to horizontally center align group1 and right align group2 with flex.

<div class="holder">
    <div class="group1">
        ...
    </div>
    <div class="group2">
        ...
    </div>
</div>

CSS:

.holder{
    display: flex;
    justify-content:center;
}
.group2{
    align-self: flex-end;
}

But everything is just centered, what's the fix?

This isn't possible with flexbox any more than any other layout...my previous answer applies. — Paulie_D, Dec 15 '15 at 12:19
"What's the fix?" Is that even a question? You could atleast ask for different ways to do it, because flex-box isn't going to work. — Kees Sonnema, Dec 15 '15 at 12:22
For some alignment options see here: [Methods for Aligning Flex Items](http://stackoverflow.com/a/33856609/3597276) — Michael Benjamin, Dec 15 '15 at 15:20

score 1 · Answer 1 · answered Dec 15 '15 at 12:24

As flexbox is built on manipulation of margins there is no method of moving one item out of the flow other than using position:absolute.

Any other method leaves the center item affected by other elements.

.holder {
  display: flex;
  justify-content: center;
  border: 1px solid grey;
  position: relative;
}
.group1 {
  background: plum;
}
.group2 {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid red;
}

<div class="holder">
  <div class="group1">
    Group 1
  </div>
  <div class="group2">
    Group 2
  </div>
</div>

score 1 · Answer 2 · answered Jul 17 '21 at 06:08

Immagine you have a button with a text and a icon and you want the text on the center and the icon on the right. Don't forget to give a width to the button.

With flexbox is really simple to do it.

button {
 display: flex;
 justify-content: center;
 align-items: center;
 flex: 1;
 width: 400px;
 order: 1;
}

span {
 flex: 1;
}

<button>
 <span>
  Click me  
 </span>
 <i>></i>
</button>

score 1 · Answer 3 · answered Jul 17 '21 at 07:39

We can achieve it using flex, grid and position.

Check out the solution for flex, grid as position has already been submitted above

Flex Solution:

.holder {
  display: flex;
}
.group1 {
  flex: 1;
  text-align: center;
}

<div class="holder">
  <div class="group1">...</div>
  <div class="group2">.....</div>
</div>

Grid Solution:

.holder {
  display: grid;
  grid-template-columns: 1fr 0fr;
}
.group1 {
  flex: 1;
  text-align: center;
  border: 1px solid green;
}
.group2 {
  border: 1px solid pink;
}

<div class="holder">
  <div class="group1">...</div>
  <div class="group2">.....</div>
</div>

Nenad Vracar · Accepted Answer · 2015-12-15T12:37:37.223

-1

This is the best what you can do with just Flexbox

.holder{
  display: flex;
  justify-content: center;
}

.group1 {
  flex: 1;
  text-align: center;
}

.group2{
  margin-left: auto;
}

<div class="holder">
    <div class="group1">
       Center
    </div>
    <div class="group2">
        Right
    </div>
</div>

Better option is to use relative/absolute position with Flexbox

.holder{
  display: flex;
  justify-content: center;
  color: white;
  position: relative;
}

.group1 {
  flex: 1;
  text-align: center;
  background: black;
}

.group2{
  position: absolute;
  top: 0;
  right: 0;
}

<div class="holder">
    <div class="group1">
       Center
    </div>
    <div class="group2">
        Right
    </div>
</div>

edited Dec 15 '15 at 12:37

answered Dec 15 '15 at 12:24

Nenad Vracar

118,580
15
151
176

Note the Group1 isn't actually centered. – Paulie_D Dec 15 '15 at 12:26
Yes because of width of `.group2`, but i think is this is closest you can go with flexbox without using relative/absolute positioning. – Nenad Vracar Dec 15 '15 at 12:28
Thanks I think this is the closet you'll get with flex. – panthro Dec 15 '15 at 12:33

Luís P. A. · Answer 5 · 2015-12-15T12:31:36.007

-2

You can set a height in the .holderand the play with align-self and text-align:

CSS

.holder{
    display: flex;
    justify-content:center;
    align-content: center;
    height: 200px;
    background: #ccc;
}
.group2{
    align-self: center;
    text-align: right;
    width: 50%;
}

.group1{
    align-self: center;
    width: 50%;
    text-align: center;
}

DEMO HERE

edited Dec 15 '15 at 12:31

answered Dec 15 '15 at 12:22

Luís P. A.

9,524
2
23
36

Align center and right with flex?

5 Answers5