Flex-containers/boxes etc

so in the first few lessons we had the flex-container as they called it the parent of the flex items and, now we are learning about flex-shrink. I now know how they work and how to use them. What scale they go on x an y what, value’s to use and a few way’s to play around with them?

But what are they for excatly? And when do you use them? How does it excatly benefit the your site? I wish they also explained this in the lessons. I find it vert frustrating not to know this. And it’s bothering me since lesson 1.

https://learn.freecodecamp.org/responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column here’s the link aboutone of them

also why don’t we use the , anymore with numbers? in the previouse lessons we always used 1, 1, but when it comes to Use the flex-basis Property to Set the Initial Size of an Item its 1 1 why is that? where did the comma’s go?

Flexbox was specifically made to layout elements in one direction (horizontal or vertical). Especially horizontal layouts, since elements tend to have a vertical layout by default. Before flexbox this was usually achieved by using tables, floats, or inline-blocks. Flexbox styles look cleaner and are more straightforward.

Also before flexbox, vertical centering was a pain. Now it’s just a few flex properties you just need to add.

The only cases I can think of where commas are used in CSS properties are the font-family property, the background property (when defining different layers of backgrounds) and in function-like values (like rgb()). In most other cases values are just separated with spaces (like in margin or padding).

1 Like

If you want more practice with flexbox, I found this game called Flexbox Froggy really fun and useful.

I also read the documentation on w3schools which cleared up a lot of how to use it and when.

1 Like

yes i think i will :3 thnx