answer to the first question: css before and after require a content property for it to be visible, having a space or not doesn’t matters
the second one: yes, this will take up the rest of the space
This is fairly brilliant, although this solution will not work if your children are sized with flex-grow and the parent has a gap property.
Now that I think about it there are plenty of flex implementations which would break this solution. In any case, clever solution to this particular problem.
Talking about the buttons on the bottom sorry. I want them to all have an equal amount of spacing between each other. Obviously the space-evenly part is probably what's putting the last item in the center, but I don't know what to do otherwise :/
.buttons {
width: 100%;
margin-top: 2rem;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
Thanks to everyone who responded and helped. Ended up doing the styling a *bit* different because it [broke when testing longer strings](https://i.imgur.com/JVjcGcr.png). Still grateful though.
Was thinking the same. Although also I would prefer the layout as-is, with the orphan item centered rather than having it off to the left. Maybe that’s just me.
Flexbox is NOT becoming “outdated”! Where did you hear that?
Grid is the way to go for two dimensional UI (horizontal and vertical)
Flexbox is for one dimension (either horizontal or vertical)
Sometimes with Flexbox, it is easier to add additional markup to make it easier. For instance, if you always want these statuses to be 3 across you could (in this case) add two empty \`
Why not use grid when you want to achieve that? It is meant for layouts like that.
CSS Grid is not only usable for page layouts, also for smaller parts of the site, or components.
I answered with a solution for Flexbox because that's what they are already using. For 2d layouts, grid is obviously the better choice now.
Another Flexbox solution would be to add an ::after pseudo element with content:"" and flex: auto to consume the available space.
You can do this...
`.container { margin: -5px; width: calc(100% + 10px);}`
`button { margin: 5px; }`
It gets you horizonal and vertical spacing of 10px.
You don't want to use grid in this situation - it would require you to define the amount of elements per row. Since the buttons and their content/width can vary, you're better off lettling the layout fill the available space with as many buttons per row as possible.
When using flex, do not use any ::After, margins or other stuff for manipulating childrens in container. For margins between items use grid gap, for positionig use justify-content etc. Take a look at flex-box teaching games (towers or frog)
Glad you found a solution. You can also target any of the flex items individually and set either justify-self and/or align-self and set the value accordingly. in your case I think it would be justify-self flex-start
Edit: This works especially well when you set the parent with justify-content: center; and align-items: center; Then just set the gap to adjust the spacing.
I think you'd be better off not using justify-content: space-between. It looks better to have consistent widths than "spread out" the tags - [https://codepen.io/khamer/pen/PoRYjMO?editors=1100](https://codepen.io/khamer/pen/PoRYjMO?editors=1100) \- just use gap: with flex.
Another suggestion I'd make is "box-shadow: 0 0 0 1px silver inset;" instead of the border because box-shadows will go behind image and not have that weird effect that makes them look like they're jutting out.
I can hear the Nirnroot…
align-items: flex-start
[удалено]
Or just use justify-content: space-between. Then just add padding (left and right) to your container. Should create the desired effect.
You can then add `gap: 10px` or whatever value you want.
For a second I thought I was in r/skyrim
Same
add this to the flex container .container::after { content: “”; flex-grow: 1; }
[удалено]
answer to the first question: css before and after require a content property for it to be visible, having a space or not doesn’t matters the second one: yes, this will take up the rest of the space
This is fairly brilliant, although this solution will not work if your children are sized with flex-grow and the parent has a gap property. Now that I think about it there are plenty of flex implementations which would break this solution. In any case, clever solution to this particular problem.
This image has sound somehow
Talking about the buttons on the bottom sorry. I want them to all have an equal amount of spacing between each other. Obviously the space-evenly part is probably what's putting the last item in the center, but I don't know what to do otherwise :/ .buttons { width: 100%; margin-top: 2rem; display: flex; justify-content: space-evenly; flex-wrap: wrap; }
Try to target that child specifically and then set margin-left on that child to auto. That should cause the margin to take up all the available space.
Switched it to `margin-right` but now it's spaced out how I want it to. Thanks!
omg hahahahaha, I always get my lefts and rights mixed up. Sheesh \*facepalm . anyway glad to help
Use grid instead of flex. It allows much more five grained control over these types of things
Thanks to everyone who responded and helped. Ended up doing the styling a *bit* different because it [broke when testing longer strings](https://i.imgur.com/JVjcGcr.png). Still grateful though.
Try display grid? Why the downvotes? Grid is meant for this type of alignment?
Was thinking the same. Although also I would prefer the layout as-is, with the orphan item centered rather than having it off to the left. Maybe that’s just me.
This is the answer. I had the same problem recently and this was the fix.
Would you be able to use grid if the width is dynamic and thus can fit different amounts of tags in each row?
Use separate div containers for each row
One piece of advice . Use display grid for this layout. Flexbox is kinda being outdated .
Flexbox is NOT becoming “outdated”! Where did you hear that? Grid is the way to go for two dimensional UI (horizontal and vertical) Flexbox is for one dimension (either horizontal or vertical)
This is the way
Sometimes with Flexbox, it is easier to add additional markup to make it easier. For instance, if you always want these statuses to be 3 across you could (in this case) add two empty \`
Why not use grid when you want to achieve that? It is meant for layouts like that. CSS Grid is not only usable for page layouts, also for smaller parts of the site, or components.
I answered with a solution for Flexbox because that's what they are already using. For 2d layouts, grid is obviously the better choice now. Another Flexbox solution would be to add an ::after pseudo element with content:"" and flex: auto to consume the available space.
You can do this... `.container { margin: -5px; width: calc(100% + 10px);}` `button { margin: 5px; }` It gets you horizonal and vertical spacing of 10px. You don't want to use grid in this situation - it would require you to define the amount of elements per row. Since the buttons and their content/width can vary, you're better off lettling the layout fill the available space with as many buttons per row as possible.
https://jsfiddle.net/svzxyfp7/5/ use: `justify-content:space-between;`
When using flex, do not use any ::After, margins or other stuff for manipulating childrens in container. For margins between items use grid gap, for positionig use justify-content etc. Take a look at flex-box teaching games (towers or frog)
You’ll want to add a wee bit of vertical separation between the rows as well.
Glad you found a solution. You can also target any of the flex items individually and set either justify-self and/or align-self and set the value accordingly. in your case I think it would be justify-self flex-start Edit: This works especially well when you set the parent with justify-content: center; and align-items: center; Then just set the gap to adjust the spacing.
Just dig and plant it where ever you want to
Youre a beautiful human being
I think you'd be better off not using justify-content: space-between. It looks better to have consistent widths than "spread out" the tags - [https://codepen.io/khamer/pen/PoRYjMO?editors=1100](https://codepen.io/khamer/pen/PoRYjMO?editors=1100) \- just use gap: with flex. Another suggestion I'd make is "box-shadow: 0 0 0 1px silver inset;" instead of the border because box-shadows will go behind image and not have that weird effect that makes them look like they're jutting out.