A Fun Way to Learn CSS Flexbox

Hello my fellow developer, welcome to yet another article.

The time has come to talk about the CSS and the Flexbox layout component. I will briefly describe the CSS properties and at the end of this post, you will find a couple of useful links that will help you learn the Flexbox in a fun way. It's always good to have an interactive way of learning beside reading the dry documentation.

Ok, I've mentioned multiple CSS properties and that means that the Flexbox is an entire module. This is the first thing we need to remember. Because of that, we need to combine both parent's and children's properties in order for the layout to work properly.

Parent properties

1. display
2. flex-direction
3. flex-wrap
4. flex-flow (a shorthand for flex-direction and flex-wrap)
5. justify-content
6. align-items
7. align-content

display

This property defines the flex container. It can be flex or inline-flex. By setting this property, we enable the flex context for the child elements.

flex-direction

Flex is a single-direction layout, and by setting this property, we determine the direction of the items within the container.

flex-wrap

By default, flex items within the container will try to fit in one line. This can be changed by setting the flex-wrap property.

flex-flow

This is a shorthand for flex-direction and flex-wrap properties. By using this property, we can set both of them correspondingly.

justify-content

This property determines the allocation of the extra free space between the items over the main axis. It aligns the items across the main axis accordingly.

align-items

This property defines how the flex items are laid out based on the cross-axis (vertical line).

align-content

Allocates the extra free space, if any, over the cross-axis. It aligns the container lines accordingly.

Children properties

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self

order

This property controls the order in which the items appear within the flex container. Negative order is allowed.

flex-grow

Represents the item ability to grow when needed. It defines the amount of the available space that will be reserved for the item. Negative numbers are not allowed.

flex-shrink

Similar to flex-grow, this property represents the item ability to shrink when needed. Negative numbers are not allowed.

flex-basis

This property defines the default size of the element before allocating the remaining space. It accepts an actual length, or a keyword as a value.

flex

The shorthand for flex-grow, flex-shrink and flex-basis properties. By setting this we can set all of them accordingly.

align-self

This property enables us to override the alignment of the individual item.

Ok, the list with the short explanations should be enough to get you started, and as I promised, here are a couple of cool links that will make the learning process pretty interesting. One of them was used as a base for this post.

1. flexbox-froggy
2. flexbox-defense
3. complete flexbox guide

Comments

[Alvaro Eduardo Falcón Morales]

Great post! In my opinion these tools are a great option to get fun and learn flexbox.
Another tool that I used and I think is very helpful is mastery.games/p/flexbox-zombies.

Have a nice day! :)

[Milos Protic]

Thanks. That one is cool too, thanks for sharing.