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
- display
- flex-direction
- flex-wrap
- flex-flow (a shorthand for flex-direction and flex-wrap)
- justify-content
- align-items
- 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
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- 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.
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.