How to center-align one flex item and right-align another using Flexbox [duplicate]

Question

I am totally new to Flexbox and wanted to align buttons, but I could not see how to handle the common case with a center-aligned button and a right-aligned button on the same row using only Flexbox.

However, I found a way that used an invisible left-aligned item of the same length as the right-aligned item and the flex justify-content with space-between to make the middle item centered on the row.

Is there a more direct way with Flexbox?

.flexcontainer {
  display: flex;
  justify-content: space-between;
  width: 500px;
  height: 200px;
}

.iteminvisible {
  flex: 0 1 auto;
  width: 100px;
  height: 100px;
  visibility: hidden;
}

.itemcenter {
  flex: 0 1 auto;
  width: 150px;
  height: 100px;
}

.itemright {
  flex: 0 1 auto;
  width: 100px;
  height: 100px;
}

<div class="flexcontainer">
  <div class="iteminvisible">Other</div>
  <div class="itemcenter">One</div>
  <div class="itemright">Other</div>
</div>

Penny Liu · Accepted Answer · 2022-03-18 13:07:58Z

Using justify-content: space-between with an invisible flex item, as described in your question, is a good way to achieve the layout you want. Just note that the middle item can only be centered if both left and right items are equal length (see demo).

Another solution you may want to consider involves auto margins and absolute positioning. Two benefits of this method are no need for extra mark-up and true centering can be achieved regardless item sizes. One drawback is that the centered item is removed from the document flow (which may or may not matter to you).

.flexcontainer {
  display: flex;
  justify-content: flex-start;
  /* adjustment */
  position: relative;
  /* new */
  width: 500px;
  height: 200px;
}

.itemcenter {
  flex: 0 1 auto;
  width: 150px;
  height: 100px;
  position: absolute;
  /* new */
  left: 50%;
  transform: translateX(-50%);
}

.itemright {
  flex: 0 1 auto;
  width: 100px;
  height: 100px;
  margin-left: auto;
  /* new */
}

<div class="flexcontainer">
  <div class="itemcenter">One</div>
  <div class="itemright">Other</div>
</div>

More details here: Methods for Aligning Flex Items along the Main Axis (see boxes #62-78).

This doesn't center.. It depends on the width of the elements that are to the left/right. If they are the same this works. If not this don't work.
I can't believe there's not a better solution to this. I tried using justify-content: center and then align-self on the right element, but could not get it to work.

Penny Liu · Accepted Answer · 2022-03-18 13:07:07Z

0

.container {
  display: flex;
  flex-direction: column; //this will allow flex-end to move item to the right
  align-items: center;
}
.right-item {
  align-self: flex-end;
}

edited Mar 18, 2022 at 13:07

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered Jun 21, 2016 at 19:41

Dots Me

2892 silver badges2 bronze badges

3 Comments

alana314 Over a year ago

But this puts the right-item below the middle one, no?

badigard Over a year ago

this puts the items in separate rows

Ronin Over a year ago

that's not the expected behaviour see fiddle: jsfiddle.net/jLw437s2

Collectives™ on Stack Overflow

How to center-align one flex item and right-align another using Flexbox [duplicate]

2 Answers 2

2 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Linked

Related