Flex box justify-content on main axis in center except for last flex item

Question

I have three flex items in my flex box. I want the first two centered and the last one to align all the way to the right along the main axis.

really basic overview:

<div class="flex flex-center">
  <div>flex item 1</div>
  <div>flex item 2</div>
  <div style="margin-left: auto;">flex item 3</div>
</div>

My CSS for the flex class is:

.flex {
  display: flex;

  &.flex-center {
    align-items: center;
  }
}

What happens when I use a margin-left: auto; is it pushes the first two flex items to the flex start of the main axis. I want the first two flex items centered, and the third item to align all the way to the right (end) of the main axis.

jpegzilla · Answer 1 · 2018-10-25T07:35:40.080

0

Sounds like you just need to do a little math and use the last-child selector. Take a look at my pen here and tell me if this is what you needed.

EDIT: I now think the best way to do this would be with some hidden spacer elements and the flex-grow property. Example here.

edited Oct 25 '18 at 07:35

answered Oct 25 '18 at 03:49

jpegzilla

80
2
10

Nope, your pen has 7 items and aligning vertical on the Y axis. I'm just looking for three items along the horizontal axis. – randombits Oct 25 '18 at 03:53
@randombits well, my bad. can you justify using absolute positioning in your use case? https://codepen.io/jpegzilla/pen/OBadRr – jpegzilla Oct 25 '18 at 04:13
no, no absolute positioning unfortunately. – randombits Oct 25 '18 at 04:23
what do you think of this? https://codepen.io/jpegzilla/pen/OBadRr – jpegzilla Oct 25 '18 at 04:32

Flex box justify-content on main axis in center except for last flex item

1 Answers1