0

Like many people before me, I want to move the last child in a flex box to the flex box end.

I already found the answer to my question. Solution using margin: auto:

.container {
   width: 100%;
   display: flex;
   justify-content: flex-start;
}

.last-child {
  // justify-self: flex-end; why does this not work?
  margin-left: auto;
}

But I would like to know why justify-self does not work like that? Margin: auto feels like a hack to me. Is there no flex-box way to solve this? Does justify-self not work like justify-content but rather justify-item on a container level?

Thank you for your support!

Andre
  • 4,185
  • 5
  • 22
  • 32
  • "In flexbox layouts, this property is ignored (more about alignment in Flexbox)" https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self – powerbuoy Mar 08 '20 at 20:27
  • 2
    could you please add your html code as weel? – Sushmit Sagar Mar 08 '20 at 20:31
  • it was a css related question, I think the html won't change anything, also it seems like this question has been asked before: https://stackoverflow.com/questions/60592022/gatsby-initial-rerender-on-client-side-bug – Andre Mar 08 '20 at 21:02
  • 1
    I have a solution for this using `CSS Grtid` but can't post due to the closed state of the question. Please consider reopening. My solution is: https://jsfiddle.net/cxkfnvjg/1/ – Andy Hoffman Mar 08 '20 at 21:04
  • So this was closed and the question referenced by @Temani is almost 5 years old. Three are zero mentions of` CSS Grid` in that answer and I think this one was closed way too soon. – Andy Hoffman Mar 08 '20 at 21:53
  • @AndyHoffman how CSS grid is relevant to this question? the question is clear and asking something related to flexbox not how to do achieve something. Also the 5 yeasr old question is the most up to date question related to flexbox and I will use it to close question even in the next 5 years – Temani Afif Mar 08 '20 at 22:05

1 Answers1

1

There's no justify-self property in flexbox for flex-items to align them on the main axis. For cross-axis, there's align-self property though, to align flex-items vertically.

If you don't like the margin to align flex-items on main axis then you also add an empty span tag before the last-child and give it flex-grow: 1 css to get the same result.

Sushmit Sagar
  • 1,412
  • 2
  • 13
  • 27