CSS Flexbox i realized there is not only one main axis and cross axis

user_16725399 0
Viewed 45

Today I've realized something about flexbox that I didn't know before. I'm writing this because i want to verify it.

so from what I knew, when we do display:flex now we created a flex container and its children will be the "flex items".

the flex container has a main axis and cross axis, and that's it.

now i see that the flex container has rows and that made me realized that the rows have their own main axis and cross axis

so when we do align-items we are aligning the flex items that are in the row

and when we do align-content we are aligning the rows !

here is a picture that demonstrate what I'm trying to say.

enter image description here

so if we had another row(only possible with flex-wrap:wrap) and we do align-content:space-between; that will create a space between the rows

am I right ?

css
1 Answers

Yes, you are right. I would like to give you a tricky tip for making flexbox the easiest way you can ever use. Make a flexbox div as a parent and put inside it multiple items, and they will act as child divs(s).. and then, without giving the parent any alignment CSS codes, just run your code on your browser and use the DevTool and inspect your parent div and then you will see an icon next to the code display: flex; press on it and you will find all alignments options you can use for your flexbox. Feel free to try all options until you reach your final required result.

Also, I advise you to play the "Flexbox Froggy" game from this link. If you reach a high level of this game, that means that you understand the flexbox.

user_116609710
Related