flex justify-content: center with last aligned to the left of its row
I am trying to make the final item of some flex items to appear to the left of its row.
I am very new to this and am trying learn flex.
I tried something like
.last-flex-item { margin-right: 0 }
but that drags the last item all the way to the left outside of its flex row (breaching the column).
I've checked flex doc and I am lost. I can think of some inelegant ways to try but I thought I would be best to ask because it really seems like this should be a simple thing to do but I can't work it out.
https://jsfiddle.net/7ep1Lztc/1/Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
3 Replies
this is a perfect use case for grid, as it'll work like this out of the box
you can get it to work with flex too though by using
justify-content: left;also, don't forget to have
flex-grow set to 0
or it will take the entire width
or use grid, this is the default behaviour of grid
just display: grid; grid-template-columns: 1fr 1fr;(also, for future reference, this is much more a question for #front-end. #ui-ux is here to ask about UI/UX design issues, where #front-end is for the actual coding of the front-end of websites)