How to justify a single flexbox item override justify-content

Question

You can override align-items with align-self for a flex item  I am looking for a way to override justify-content for a flex item   If you had a flexbox container with justify-content flex-end  but you want the first item to be justify-content  flex-start  how could that be done   This was best answered by this post  https   stackoverflow com a 33856609 269396

User · Answer

AFAIK there is no property for that in the specs, but here is a trick I’ve been using: set the container element ( the one with display:flex ) to justify-content:space-around Then add an extra element between the first and second item and set it to flex-grow:10 (or some other value that works with your setup)

Edit: if the items are tightly aligned it's a good idea to add flex-shrink: 10; to the extra element as well, so the layout will be properly responsive on smaller devices.

User · Answer

For those situations where width of the items you do want to flex-end is known  you can set their flex to  0 0   px  and set the item you want to flex-start with flex 1   This will cause the pseudo flex-start item to fill the container  just format it to text-align left or whatever

User · Answer

There doesn t seem to be justify-self  but you can achieve similar result setting appropriate margin to auto    E  g  for flex-direction  row  default  you should set margin-right  auto to align the child to the left    x000D   x000D   container   x000D    height  100px  x000D    border  solid 10px skyblue  x000D     x000D    display  flex  x000D    justify-content  flex-end  x000D    x000D   block   x000D    width  50px  x000D    background  tomato  x000D    x000D   justify-start   x000D    margin-right  auto  x000D    x000D   lt div class  container  gt  x000D     lt div class  block justify-start  gt  lt  div gt  x000D     lt div class  block  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D       This behaviour is defined by the Flexbox spec

User · Answer

I solved a similar case by setting the inner item s style to margin  0 auto  Situation  My menu usually contains three buttons  in which case they need to be justify-content  space-between  But when there s only one button  it will now be center aligned instead of to the left

User · Answer

If you aren t actually restricted to keeping all of these elements as sibling nodes you can wrap the ones that go together in another default flex box  and have the container of both use space-between    x000D   x000D   space-between   x000D    border  1px solid red  x000D    display  flex  x000D    justify-content  space-between  x000D    x000D   default-flex   x000D    border  1px solid blue  x000D    display  flex  x000D    x000D   child   x000D    width  100px  x000D    height  100px  x000D    border  1px solid  x000D    x000D   lt div class  space-between  gt  x000D     lt div class  child  gt 1 lt  div gt  x000D     lt div class  default-flex  gt  x000D       lt div class  child  gt 2 lt  div gt  x000D       lt div class  child  gt 3 lt  div gt  x000D       lt div class  child  gt 4 lt  div gt  x000D       lt div class  child  gt 5 lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Or if you were doing the same thing with flex-start and flex-end reversed you just swap the order of the default-flex container and lone child

User · Answer

To expand on Pavlo s answer https   stackoverflow com a 34063808 1069914  you can have multiple child items justify-content  flex-start in their behavior but have the last item justify-content  flex-end  x000D   x000D   container     height  100px    border  solid 10px skyblue    display  flex    justify-content  flex-end      container  gt    not  last-child        margin-right  0      margin-left  0        set the second to last-child     container  gt   nth-last-child 2        margin-right  auto      margin-left  0      block     width  50px    background  tomato    border  1px solid black    x000D   lt div class  container  gt       lt div class  block  gt  lt  div gt       lt div class  block  gt  lt  div gt       lt div class  block  gt  lt  div gt       lt div class  block  style  width 150px  gt I should be at the end of the flex container  i e  justify-content  flex-end  lt  div gt   lt  div gt  x000D   x000D   x000D

[css] How to justify a single flexbox item (override justify-content)

Examples related to css

Examples related to flexbox