Hi guys,
I only just recently started learning about Flexbox and it feels very confusing to me. As I was doing the tutorials, I wasn’t entirely sure I understood what i was doing even as I kept going back to Flexbox section in the learn web development part of the site. Hoping for some clarification and i’ve attached the codepens for each of the tutorials.
I appreciate your help!
Here are the codepens for each of them.
https://codepen.io/aurarian/pen/eYvdvxW Flexbox 1
https://codepen.io/aurarian/pen/ZEepedK Flexbox 2
https://codepen.io/aurarian/pen/KKWgmVa Flexbox 3
https://codepen.io/aurarian/pen/dyvpWXa Flexbox 4
First one was pretty straightforward.
Second one, the instructions kinda threw me off. “we want them to be displayed as three equal sized columns, no matter what content is in each item.” I wasn’t sure what was meant by making them into columns since if I set the directions as columns it just makes them stack on top of each other. I saw that leaving it to its default made them look pretty much like the completed version.
My question is what does it mean to make them display equally no matter what content is in each? Does this have to do with flex: 1 which distributes the available space left in the container and adds them to all the items equally?
The third tutorial didn’t seem really confusing but I’m not sure why setting align-items: center basically wiped out the height of the flex item. I understand that align items is used to align them depending on what the cross-axis is in the container but I don’t get why that would wipe out the height?
#4 seemed really complex but it seems that other than a padding issue on the items, all you had to do was set the flex container in the ul and tell it to wrap and then distribute the space around the items. The spacing is what had me a little confused since there is some padding or margin on the first and last items even when set flush by using space-between. Is this just overthinking on my part?
