I’m trying to learn flexbox and grid but creating an e-commerce design. I’m at the stage where I need to display the store items on the page. Basic, one after the other
You are adding it top and bottom. The shorthand with just two values sets the top and bottom to the first and the left and right to the second.
To add only to the top use 3 values, where the 3rd is for the bottom. margin: 20px auto 0;
Alternatively use gap
Flex is quite flexible, you can have fixed widths, or adaptive widths that adjust to content and available space, whatever fits your needs.
Absolutely fixed widths are generally a bad idea, but hinted at fixed widths via max-width or flex-basis are good.
The flex way is to use flex-basis which does set a width, but when used in conjunction the flex-grow and flex-shrink allows some adjustment either way if desired.
This is the shorthand for flex-grow,flex-shrink and flex-basis combined. The second and third parameters ( flex-shrink and flex-basis ) are optional. The default is 0 1 auto , but if you set it with a single number value, it’s like 1 0 .
I’m guessing flex-grow:300px is max-width, the next flex-shrink:0 is min-width, what’s flex-basis?
That is setting flex-basis (sort of width) to 300px, grow is set to 0 (don’t grow), shrink is set to 1 (do shrink).
So the flex items will try to be 300px, but if space gets too tight they will shrink to fit.
If you enable grow, they will expand to fill any available excess space. Try it in the pen to see what happens.