Flex Box Basics

So…I just lurned about grids and flex boxes this week and started working with them. I have to say…it seems simpler than it actually is (or at least that is how it feels right now). I guess practice makes perfect so that’s what I’ll be doing a lot.

I think Flex box is pretty straight forward: create a container (flex container), put something inside of the container (flex item), and position it however you want.

Sound really simple, right?…but to do this we have to know which CSS properties to use, how they work with their different values, and which HTML elemento to apply them to.

display: flex; → this property and value required to create a flex box and it has to be applied to the flex container. It’s actually telling that container that whatever is inside of it will be displayed in a “flex” way, which means one thing next to the other in a row or one thing on top of the other in a column, depending on the orientation…which is the next point.

flex-orientation: column or row → column puts one item next to the other in a horizontal way completely stretched vertically; and row (the default) puts items on top of each other in a vertical way completely stretched horizontally. This property is applied to the flex container.

justify-content: → this property aligns flex items horizontally or vertically depending on the flex-orientation. When flex-orientation is set to column justify-content will align items horizontally, and when set to row it will align vertically. The values it can take are: flex-start, flex-end, center, space-around, space-between, space-evenly, and stretch (default value). But I will not go into detail on them right because I think it will be confusing. It’s better to try them out and play with then to see how they work. You can do this by creating a div with 3 o 4 div’s in it (a box with 3 or 4 boxes in it)…and have fun.

There are some other properties for flex box, some are applied to the flex box items but this is enough to get started.

I really recommend trying to master flex box because that and grids make life a lot easier for us.