if i have three div blocks in a flexbox and I set the flexbox to ‘space around’ and turn ‘wrap children’ on, when the flexbox gets small enough, the end item gets put in the next row. HOWEVER, it appears centred, the arrangement doesn’t stay in columns. How can I work around this?
alternatively, when the items wrap i get
8 8
8
and i want
8 8
8
is there a way to do this? im pretty sure i should be using ‘space around’ I want space between the sides of the page but also when the page is on phone view there is only enough room for one div box per row and i want that to be centred - only ‘space around’ provides this but does not keep the result in columns
Your example with the “8” doesn’t show different results but I think I understand where you want to go.
I’m not 100% confortable with wrapping children options but I have a way of doing this that I use a lot for grid-like layout.
1 - setup a parent div and set it to display flex (leave the default setting justify start and align stretch) and activate wrap children
2 - setup some div inside as flex items and activate the don’t shrink option
3 - define how many columns you want. For example 3, and set up the width of the flex item to 100/3% (you can type this in the width field as Webflow will do the handy math)
4 - setup some padding on 4 sides of the flex item
5 - put whatever you want in those items and add as many item as you want FlexBox magic is happening.
If you want to go further you can also play with this project which is a game/tutorial to make you understand all about FlexBox options :
Hi thanks for the reply, I tried what you suggested and it works but doesn’t give me what im after
I want the items to align centre BUT I want them to keep consistent columns (i used the space around so i dont have type in padding). your example achieves consistent columns but the result is not aligned centre