Flexbox — Understand how it works
The Flexbox Layout makes it easier to design flexible responsive layout structures without using float or positioning.
In this article, we will discover the properties of Flexbox and how to utilize them while evaluating the results.
The flexbox consists of a container and its items
*- Properties of the flex container
- Display
display: flex;
display: inline-flex;This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.
- flex-direction
This establishes the main-axis, thus defining the direction flex items are placed in the flex container.
Options: row | row-reverse | column | column-reverse
- flex-wrap
By default, flex items will all try to fit on one line. You could change that and allow the items to wrap as necessary with this property.
Options: nowrap | wrap | wrap-reverse
- justify-content
This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size
Options: flex-start | flex-end | center | space-between | space-around | space-evenly
- align-items
This defines the default behavior for how flex items are laid out along the cross axis on the current line.
Options: flex-start | flex-end | center | baseline | stretch
- align-content
This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
NOTE: this property has no effect when there is only one line of flex items.
Options: flex-start | flex-end | center | space-between | space-around | stretch
*- Properties for the flex Items
- align-self
This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
Options: auto | flex-start | flex-end | center | baseline | stretch
- order
By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.
- flex-grow
This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It determines what amount of space available inside the flex container the item should take up.
- flex-shrink
This defines the ability for a flex item to shrink if necessary.
Conclusion
These are the basic properties of flexbox layout which for sure you will use so often. For more properties, please check the flexbox documentation.
Thank you for reading !
I hope you found this article helpful and insightful. I would appreciate your applause and sharing :-)
For more articles, check out the links below:
