Center-align one element while right-aligning its only sibling using flexbox

Question

I am trying to achieve this using flexbox:

I know how to do it by using a hidden element as in this fiddle:

.container {
  display: flex;
  justify-content: space-between;
  border: 3px solid blue;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
}

.box:first-child {
  visibility: hidden;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

But this seems like too hacky to be right.

@ManojKumar the OP isn't asking a solution using the grid, and the link to duplicate give a solution for a grid, not using flex. — Nidhin Joseph, Aug 24 '19 at 02:52
@NidhinJoseph But there is one answer with these methods: https://prnt.sc/owtkl9 I just suggested him to use Grid, not that I am making him to discontinue flex. — m4n0, Aug 24 '19 at 03:09
I agree that grid is the best option here, but the other post does not deliver a solution even with the method in the screenshot. It says about vertical alignment and the OP is asking for horizontal. — Nidhin Joseph, Aug 24 '19 at 03:27
@ManojKumar please try running code snippet for `Method #4: Add flex: 1 to left and right items` — Nidhin Joseph, Aug 24 '19 at 03:51
@NidhinJoseph Ok then OP must work with the first solution of positioning which is only possible other than the invisible elements. Should I reopen it even now? — m4n0, Aug 24 '19 at 03:57
@ManojKumar the question is a perfect duplicate since all the possible ways are listed there. If someone know another way, he should add it to the duplicate. — Temani Afif, Aug 24 '19 at 07:33
@TemaniAfif Thanks for the confirmation. For a moment, I thought I forgot the meaning of vertical and horizontal. — m4n0, Aug 24 '19 at 11:06
My question is absolutely not a perfect duplicate as the linked question asks about how to accomplish this with *four* elements and I am asking about how to accomplish it with *two* elements and one of the solutions (method #4) in that question doesn't work when there are only two elements! For this to be a perfect duplicate I should be able to use that answers as-is which is not possible. Am I missing something? — Tom Lehman, Aug 24 '19 at 12:26

score 1 · Answer 1 · answered Mar 01 '23 at 13:56

I was facing the same issue and found a better solution to the problem by using a CSS grid.

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.parent {
  display: grid;
  /*
   * Create 3 columns grid (1 ghost grid column)
   * Make first/left (ghost) and last/right column streched and center one auto width
  */
  grid-template-columns: 1fr auto 1fr;
}

.center {
  grid-column-start: 2;
  /* start your center child from 2nd column */
}

.right {
  /* Do your content right align */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

<div class="parent">
  <div class="center">
    <div class="box">Center</div>
  </div>
  <div class="right">
    <div class="box">right</div>
  </div>
</div>

score 0 · Answer 2 · answered Aug 26 '19 at 04:20

Use the flex property that sets the flexible length on flexible items. That way, I'm telling the white-box to take all available space but the first white-box will be 50% larger than the normal white -box, that will take the place of what's left

.container {
  display: flex;
  border: 3px solid blue;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
}

.white-box {
  background: white;
  flex: 1;
}

.white-box:first-child {
 flex: 1.5
}

<div class="container">
  <div class="white-box"></div>
  <div class="box"></div>
  <div class="white-box"></div>
  <div class="box"></div>
</div>

When viewing it in full screen, does that look centered? – m4n0 Aug 26 '19 at 06:12 — m4n0, Aug 26 '19 at 06:12

score 0 · Answer 3 · answered Aug 26 '19 at 04:39

you can easily achieve this kind of layout by using CSS grid

.grid-container {
  display: grid;
  grid-template-columns: auto 100px 200px 100px;
  border: 1px solid blue;
}

.grid-container > div {
  text-align: center;
  font-size: 30px;
  padding: 20px 0px;
}
.red{
  background-color: red;
}

<div class="grid-container">
  <div>1</div>
  <div class="red">2</div>
  <div>3</div>  
  <div class="red">4</div>
</div>

Hope this will be helpful for you

score 0 · Answer 4 · edited Aug 26 '19 at 06:15

0

you need to remove

.box:first-child {
  visibility: hidden;
}

edited Aug 26 '19 at 06:15

Jon P

19,442
8
49
72

answered Aug 26 '19 at 05:43

Developer Tanbir

346
2
13

Center-align one element while right-aligning its only sibling using flexbox

4 Answers4