Kevin Powell - Community•5mo ago

How to align 0..N items to start and 1 to end, with flex?

I want an item always aligned to the end, while any previous item should be aligned to the start. How can I do that, with flex?

7 Replies

clevermissfox•5mo ago

you could use flex w/ something like .item:nth-of-type(even) {align-self: end;} or give them a utility class

.item.as-end {
    align-self: end; 
    /* alternate margin-inline-start: auto; without flex */ 
}

.item.as-end {
    align-self: end; 
    /* alternate margin-inline-start: auto; without flex */ 
}

or grid if you need them to be the same width and just use your columns to always put certain items in a certain column and they arent necessarily going to be even or odd etc.

jcayzacOP•5mo ago

Turns out margins work in flex containers So this works wonders:

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  
  .last {
    margin-left: auto;
  }
}

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  
  .last {
    margin-left: auto;
  }
}

clevermissfox•5mo ago

yes the margins are how the alignment properties work. would recommend getting in the habit of using the logical properties e.g. margin-inline-start: auto or padding-block-end: 1em or inset-inline and inset-block are often useful to me. border-inline-end. inline-size instead of width, max-inline-size instead of max-width , block-size instead of height, min-block-size instead of min-height etc etc. but its great youre targeting on axis at all instead of margin: 0 0 0 auto; but if youre going to have the justify-content: space-between its already giving the last item a margin-inline-start of auto [when its a row]. so you shouldnt even need that additional selector and rule

jcayzacOP•5mo ago

@clevermissfox wow, thanks, that's a lot of useful info! Re: the last point, yes it works in most cases except when the last item is the only one. @clevermissfox by the way, what's the benefit of using

padding-block-start: 0.5714286em;
padding-inline-end: 0.5714286em;
padding-block-end: 0.5714286em;
padding-inline-start: 0.5714286em;

padding-block-start: 0.5714286em;
padding-inline-end: 0.5714286em;
padding-block-end: 0.5714286em;
padding-inline-start: 0.5714286em;

over simply

padding: 0.5714286em;

padding: 0.5714286em;

clevermissfox•5mo ago

There is none ? I would not recommend breaking it up like that if they’re all the same . My comment was directed at the importance of logical properties replacing “padding -left padding-righ padding-top padding-bottom” for border, positioning , margin, padding etc . Not creating something inefficient and verbose when it’s not necessary. Just that instead of using margin-left use margin-inline-start

jcayzacOP•5mo ago

There is none ? I would not recommend breaking it up like that if they’re all the same .

Thanks for confirming! I saw that in the tailwind's preflight iirc (or its typography plugin). alright, changed all my paddings, margins, and borders! thanks! ah vertical-align doesn't support start/end 😕

clevermissfox•5mo ago

Correct, that is an older property. Not all properties have logical options but if they do, its best to get in the habit of using those. However align-content now works for elements that are display block too!! Not sure about inline-block tho, haven't tested

Gaming

Programming

How to align 0..N items to start and 1 to end, with flex?