1 upvotes, 1 direct replies (showing 1)
View submission: Forcing sections to sit underneath eachother instead of nextdoor?
flex: 1 1 9%
Is shorthand for...
flex-grow: 1; flex-shrink: 1; flex-basis: 9%;
The `flex-grow:` means can it grow? `0` means 'no', `1` means 'yes', numbers bigger than one set the rate it grows in relation to sibling elements.
The `flex-shrink` means can it shrink? t works the same as `flex-grow`. So `0` means no, `1` means yes, larger numbers set the rate.
The `flex-basis` sets the starting size before growing or shrinking occur. `0` means no width from which point they would grow into even columns (Assuming all had the same `flex-grow`). `auto` means the width is dictated by content, they splt to a 'best-fit' depending on what is inside each element. A given value (`%` `px` `em` etc.) means they start at that width then shrink to fit or grow to fill the container.
So in your case `.small` starts with a width of 9%, but can both shrink and grow, so if you had three elements on the row they would take up 27% (3 x 9%) but would then grow to fill it. If you had twenty elements they would take up 180% of the width (e. they would overflow) but they can shrink to fit so would squish down to 5% width to fit and that's what fucks it up!
Without seeing what you are trying to get it is hard to know exactly the best solution, but you probably need to finds the parent element (Where it has `display: flex;` to set them up as flex elements) and add `flex-wrap: wrap;` this will allow them to line break when they get too squished.
Then on the items themselves (The `.small` elements) either set the `flex-shrink` value (the second `1`) to zero so they are at least 9% but can still grow to fill it when there's less of them. Or keep the `flex:` as it is but below it add `min-width: __px;` where you set a minimum px value it shrinks too but won't go below.
--------------------------------------------------------------------------------
Comment by infectbait at 22/01/2025 at 07:04 UTC
2 upvotes, 0 direct replies
thank you css angel <3 ill give this newfound knowledge a go next time i bite another chunk off, thank you for explaining it so well and having a soluion idea for me <33