CSS Flexbox

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

Flex Container

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

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

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

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

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

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.

align content

order

order: <integer>

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

align-self: auto | flex-start | flex-end | center | baseline | stretch

It allows us to adjust the alignment of a single element.

Conclusion

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.