In this article, we will learn about the Flexbox in CSS.

The word flexbox is made up of the terms flexible and box. Flexible+ box = flexbox.

Flexbox

Flexbox is a complete module, not just a single property; it encompasses a wide range of features, including its entire set of properties. Some are intended to be applied on the container (parent element, also known as “flex container”), while others are supposed to be placed on the children (also known as “flex items”).

The main axis (from main-start to main-end) or the cross axis will be used to arrange the items (from cross-start to cross-end).

• main axis: The primary axis along which flex items are laid out is the main axis of a flex container. Be aware that it is not always horizontal; it is determined by the flex-direction property.
• main-start | main-end: The flex items present in the container are arranged from main-start to main-end.
• main size: The width or height of a flex item’s main dimension, whichever is greater, is the item’s main size. The main size property of a flex item is either the ‘width’ or ‘height’ property, depending on which is in the main dimension.
• cross-axis: It is the axis that runs perpendicular to the main axis. Its direction is determined by the main axis.
• cross-start | cross-end: Starting on the cross-start side of the flex container and moving toward the cross-end side, flex lines are filled with items and placed into the container.
• cross size: The width or height of a flex item’s cross dimension, whichever is greater, is the item’s cross size. Whichever of the ‘width’ or ‘height’ properties is present in the cross dimension is the cross size property.

Flexbox Properties

Properties for the Parent (flex container)

Display

It defines a flex container. It enables flex content for its direct children.

.container {
            display: flex;
            }

flex-direction

The main axis is established using this property, defining the direction in which flex items are placed in the flex container. Flexbox is a single-direction layout concept (aside from optional wrapping). Consider flex items to be laid out primarily in horizontal rows or vertical columns.

.container {
            flex-direction: row | row-reverse | column | column-reverse;
            }

• row (default): align items in horizontal direction: left to right.
• row-reverse: align items in horizontal direction: right to left.
• column: align items in vertical direction: top to bottom.
• column-reverse: align items in vertical direction: bottom to top.

flex-wrap

by default, all the flex items try to fit in a single line. but we can change that property and can allow the items to wrap as needed using this property.

.container {
            flex-wrap: nowrap | wrap | wrap-reverse;
            }

• nowrap (default): all flex items will be on a single line, by default.
• wrap: the flex items will wrap onto multiple lines accordingly, from top to bottom.
• wrap-reverse: the flex items will wrap onto multiple lines from bottom to top accordingly.

flex-flow

It is a shorthand property for flex-direction and flex-wrap properties which together define the flex container’s main and cross axes.

.container {
            flex-flow: row nowrap;(default)
            }

Justify-content

This determines that how the main axis will be aligned. When all of the flex items on a line are inflexible, or are flexible but have reached their maximum size, it helps distribute the extra free space between them. When items overflow the line, it also has some control over how they are aligned.

.container {
            justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
            }

• flex-start (default): the flex items are aligned towards the start of the flex-direction.
• flex-end: the flex items are aligned towards the end of the flex-direction.
• center: the flex items are aligned centered along the line.
• space-between: the flex items are evenly distributed in the line; the first item is on the starting of the line, the last item is on the ending of the line.
• space-around: the flex items are evenly distributed in the line with equal space around them.(but the spaces around the edges is not equal as the space between 2 items is due to the extra space of both items whereas at the edges the space is onlu because of the single item which is present there.)
• space-evenly: the flex items are distributed so well that the spacing between any two items (and the space to the edges) is equal.

align-item

This is the default behavior for how flex items on the current line are laid out along the cross axis. Consider it the cross-axis version of justify-content (perpendicular to the main axis).

.container {
            align-items: flex-start | flex-end | center | stretch | baseline;
            }

• flex-start: the flex items are placed at the start of the cross axis.
• flex-end: the flex items are placed at the end of the cross axis.
• center: the flex items are centered in the cross-axis.
• stretch (default): the flex items are stretched to fill the container (still respect min-width/max-width).
• baseline: the flex items are aligned such as their baseline aligns.

align-content

When there is extra space in the cross-axis, this property aligns the lines of a flex container in the cross axis, similar to how justify-content aligns individual items within the main axis.

.container {
            align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;
            }

• normal (default): the flex items are aligned in their default position as if no value was set.
• flex-start: the flex items are aligned to the start of the container.
• flex-end: the flex items are aligned to the end of the container.
• space-between: the flex items are evenly distributed; the first line is at the start of the container while the last one is at the end of the container.
• space-around: the flex items are evenly distributed with equal space around each line in the container.(except the container’s edges)
• space-evenly: the flex items are evenly distributed with equal space around them in the container along with the container’s edges.
• stretch: the flex items are stretched to take up the remaining space in the container.

These are the properties for the parent(flex container). Now, we will see the properties of the children(flex item)

Properties for the Children(flex item)

order

Flex items are laid out in source order by default. The order property determines the order in which they appear in the flex container.

.item {
       order: 5;
       }

The flex items with the same order will again be laid out to the source order.

flex-grow

The flex-grow property specifies a flex item’s ability to grow if necessary. It accepts a proportional value that has no units. It specifies how much of the flex container’s available space the item should occupy.

If flex-grow is set to 1 on all items, the remaining space in the container will be equally shared with the children. If one of the children in the container has a value of 2, the remaining space would be double that of the others (or it will try to, at least).

.item {
       flex-grow: 4;
       }

Negative values are not allowed.

flex-shrink

This property is just vice-versa of flex-grow property.

It specifies a flex item’s ability to shrink if necessary.

.item {
       flex-shrink: 4;
       }

Negative values are not allowed in flex-shrink also.

flex-basis

The flex-basis property specifies an element’s default size before the remaining space is distributed. It can be a percentage (for example, 20%, 5rem, etc.) or a keyword. the keyword auto means that “Take a look at my width or height property,”(which was temporarily done by the main-size keyword). The content keyword means “size it based on the item’s content” – it’s difficult to test and understand what its siblings max-content, min-content, and fit-content do because this keyword isn’t well supported yet.

.item {
       flex-basis: auto; /* auto is default value of flex-basis */
       }

When the value of flex-basis is set to 0, the extra space around the content is not taken into account. but when the value is set to auto, the extra space is distributed based on the flex-grow value.

flex

The flex property is the shorthand property for flex-grow, flex-shrink, and flex-basis combined in the same order as mentioned. but the flex-shrink and flex-basis properties are optional. the default value of the flex property is 0 1 auto.

.item {
       flex: 0 1 auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
       }

The flex property is recommended to use, in place of setting all the properties individually. As the flex property sets the remaining property very smartly.

align-self

The align-self property allows us to align a flex item individually, overriding the default alignment or the alignment specified using the align-item property.

The align-self property is the same as the align-item property, but the only difference between these is that the align-item property specifies the alignment of all the items present in the container whereas the align-self property specifies the alignment of the specific item only.

.item {
       align-self: auto | flex-start | flex-end | center | baseline | stretch;
      }

Remember that float, clear and vertical-align properties do not have any effect on the flex items.

That’s all about the flexbox in CSS.

Hope this article will guide you to recognize all about the flexbox in CSS that you needed and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.