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.
- flex-flow (a shorthand for flex-direction and flex-wrap)
This property defines the flex container. It can be
inline-flex. By setting this property, we enable the flex context for the child elements.
Flex is a single-direction layout, and by setting this property, we determine the direction of the items within the container.
By default, flex items within the container will try to fit in one line. This can be changed by setting the
This is a shorthand for
flex-wrap properties. By using this property, we can set both of them correspondingly.
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.
This property defines how the flex items are laid out based on the cross-axis (vertical line).
Allocates the extra free space, if any, over the cross-axis. It aligns the container lines accordingly.
This property controls the order in which the items appear within the flex container. Negative order is allowed.
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-grow, this property represents the item ability to shrink when needed. Negative numbers are not allowed.
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.
The shorthand for
flex-basis properties. By setting this we can set all of them accordingly.
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.
Top comments (2)
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! :)
Thanks. That one is cool too, thanks for sharing.