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>

Answer 1

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