Skip to main content

CSS Flexbox

CSS Flexbox​

CSS Flexbox is a layout module in CSS that provides a more efficient way to layout, align, and distribute items within a container.

It allows you to create flexible and responsive layouts with less code.

To use Flexbox, you need to define a container element and apply the display: flex property to it.

Here's the properties that can be used to control the layout of flex items:

The flex-direction​

This property specifies the direction of the main axis. It can be set to row, row-reverse, column, or `column-reverse.

As an example:

Editor

Loading...

In this example:

  • The flex-direction: row is used to lay out the flex items horizontally, from left to right.
  • The items are also given a width and height, and are centered both horizontally and vertically using justify-content and align-items.
  • The :nth-child(2n) pseudo-class is used to give every other item a different background color.

The justify-content​

This property aligns items along the main axis. It can be set to flex-start, flex-end, center, space-between, space-around, or space-evenly.

As an example:

Editor

Loading...

In this example:

  • justify-content: space-between is used to evenly distribute the flex items along the main axis of the flex container.
  • This will cause the first item to align with the left side of the container, the last item to align with the right side of the container, and any remaining items to be spaced out evenly in between.
  • The items are also given a width and height, and are centered both horizontally and vertically using justify-content and align-items.
  • The :nth-child(2n) pseudo-class is used to give every other item a different background color.

The align-items​

This property aligns items along the cross axis. It can be set to flex-start, flex-end, center, baseline, or stretch.

As an example:

Editor

Loading...

In this example:

  • align-items: center is used to vertically center the flex items within the flex container.
  • This will cause the items to be aligned along the cross axis of the flex container, which is perpendicular to the main axis.
  • The items are also given a width and height, and are centered both horizontally and vertically using justify-content and align-items.
  • The :nth-child(2n) pseudo-class is used to give every other item a different background color.

The flex-wrap​

This property specifies whether items should wrap or not when there is not enough space on the main axis. It can be set to nowrap, wrap, or wrap-reverse.

As an example:

Editor

Loading...

In this example:

  • flex-wrap: wrap is used to allow the flex items to wrap onto multiple lines if there isn't enough space for them all to fit on one line.
  • This will cause the flex container to expand vertically to accommodate the wrapped items.
  • The items are also given a width and height, and are centered both horizontally and vertically using justify-content and align-items.
  • The :nth-child(2n) pseudo-class is used to give every other item a different background color.

The flex-grow​

This property specifies how much an item should grow relative to the other items. It is a unitless value that defaults to 0.

As an example:

Editor

Loading...

In this example:

  • flex-grow: 1 is used to tell the flex items to grow and fill any available space within the flex container.
  • This will cause the items to expand horizontally and evenly distribute any remaining space within the container.
  • The items are also given a width and height, and are centered both horizontally and vertically using justify-content and align-items.
  • The :nth-child(2n) pseudo-class is used to give every other item a different background color.

The flex-shrink​

This property specifies how much an item should shrink relative to the other items. It is a unitless value that defaults to 1.

As an example:

Editor

Loading...

In this example:

  • flex-shrink: 1 is used to tell the flex items to shrink if necessary in order to avoid overflowing the flex container.
  • This is useful when there isn't enough space available for all the items to fit at their full size, as it allows the items to scale down proportionally to fit within the container.
  • The items are also given a fixed width and height, and are centered both horizontally and vertically using justify-content and align-items.
  • The :nth-child(2n) pseudo-class is used to give every other item a different background color.

The flex-basis​

This property specifies the initial size of an item before any remaining space is distributed. It can be set to a length, percentage, or auto.

As an example:

Editor

Loading...

In this example:

  • flex-basis: 200px is used to set the initial width of the flex items to 200 pixels.
  • This means that each item will have a starting width of 200 pixels, but can grow or shrink depending on the available space within the flex container.
  • The items are also given a fixed height, and are centered both horizontally and vertically using justify-content and align-items.
  • The flex-shrink and flex-grow properties are set to 1, which means that the items can shrink or grow proportionally to fill the available space.
  • The :nth-child(2n) pseudo-class is used to give every other item a different background color.