CSS flexbox layout allows us to easily format HTML elements. It is a set of properties in CSS introduced to provide a new layout system. Flexbox makes it simple to align items vertically and horizontally using rows and columns.
Flexbox allows us to layout elements in a container, arrange them, align them, and distribute the space between them, regardless of their size.
It allows us to make elements in a container flexible i.e items inside a container can be stretched and compressed to accommodate the available space, and can be sized proportionally to each other, and any available space between or around them can be distributed among them based on a proportion that you get to specify.
CSS Flex properties
Here is a list of the CSS flexbox properties that can be used to position elements in CSS
The first step to start using Flexbox is to create a flex container. Elements of a flex container are called the flex items. Elements of the container are laid out inside the flex container using the Flexbox properties.
display: flex creates a block-level flex container; display: inline-flex creates an inline-level flex container.
Children of a flex container are laid out using the Flexbox layout. Any element outside a flex container is not affected by the Flexbox layout.
The default arrangement after applying
display: flex is for the items to be arranged along the main axis from left to right.
flex-direction: row | row-reverse | column | column-reverse
the flex-direction property to the flex container allows us to change the direction in which our flex items display. This determines the direction that flex items are laid out in.
flex-wrap: nowrap | wrap | wrap-reverse
Flexbox by default will try to fit all elements into one row. However, you can change this with the flex-wrap property. The flex-wrap property controls whether the flex container is a single-line or multiple lines, and the direction of the cross-axis, which determines the direction new lines are stacked in.
justify-content: flex-start | flex-end | center | space-between | space-around
This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
align-items: flex-start | flex-end | center | baseline | stretch
This defines the default behavior for how flex items are laid out along the cross axis on the current line. It’s like the justify-content version for the cross-axis (perpendicular to the main axis).
align-content: flex-start | flex-end | center | space-between | space-around | stretch
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.
By default, flex items are laid out in the order which is in the source file. However, the
order property controls the order in which they appear in the flex container.
align-self: auto | flex-start | flex-end | center | baseline | stretch
It allows us to adjust the alignment of a single element.
In this blog, we have covered the CSS flexbox and all the most common CSS flexbox properties. That’s it, for now, hope you learned something new.