Flexbox in CSS

« Prev Next »

CSS Flexbox (short for Flexible Box Layout) is a layout model that provides a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and dynamic.

Flexbox makes it easy to design flexible responsive layout structure without using float or positioning

css-flexbox

Flexbox Basics

Flexbox consists of two main components:

 

  • Flex container: The parent element that contains the flex items.
  • Flex items: The child elements within the flex container that are laid out and aligned based on the flex properties.

Example

.container {
  display: flex;
}

display: flex; defines a flex container, enabling the use of flexbox properties on its children (flex items).

 

Key Flexbox Properties

flex-direction

The flex-direction property specifies the direction in which flex items are placed in the flex container. By default, flex items are laid out in a row (horizontally). The flex-direction property allows you to change the orientation of the items.

 

Values for flex-direction:

  • row: The default value, displays items in a row (horizontally).
  • row-reverse: Displays items in a row but in reverse order.
  • column: Displays items in a column (vertically).
  • column-reverse: Displays items in a column but in reverse order.
.container {
  display: flex;
  flex-direction: row; /* Horizontal layout */
}

justify-content

The justify-content property aligns flex items along the main axis (horizontal by default) of the flex container. It distributes space between and around items in the container.

Values for justify-content:

  • flex-start: Aligns items to the start of the flex container (default).
  • flex-end: Aligns items to the end of the container.
  • center: Centers the items in the container.
  • space-between: Distributes space evenly between items, with no space before the first item or after the last item.
  • space-around: Distributes space evenly around the items.
.container {
  display: flex;
  justify-content: space-between; /* Distribute space between items */
}

align-items

The align-items property aligns the flex items along the cross axis (vertical by default). It controls how items are aligned in the container.

 

Values for align-items:

  • stretch: Stretches items to fill the container (default).
  • flex-start: Aligns items to the start of the cross axis.
  • flex-end: Aligns items to the end of the cross axis.
  • center: Centers the items along the cross axis.
  • baseline: Aligns items based on their baseline (useful for text).
 .container {
  display: flex;
  align-items: center; /* Center items vertically */
}

align-self

The align-self property allows individual flex items to override the alignment specified by the align-items property. This property can be applied to individual flex items if you want to align them differently from the rest of the items in the container.

Values for align-self:

  • auto: Inherits alignment from the parent container (default).
  • flex-start, flex-end, center, baseline, stretch: Same as align-items.
.item {
  align-self: flex-end; /* Align this item to the end of the cross axis */
}

flex-wrap

The flex-wrap property controls whether the flex container should wrap its items onto multiple lines or not when there isn’t enough space to fit them all in a single line.

 

Values for flex-wrap:

  • nowrap: Default value, items are arranged in a single line (no wrapping).
  • wrap: Items wrap onto multiple lines when necessary.
  • wrap-reverse: Items wrap in reverse order (bottom to top for a row or right to left for a column).
.container {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap */
}

flex-grow, flex-shrink, and flex-basis

These three properties work together to control how individual flex items grow, shrink, and take up space in the flex container.

 

flex-grow:

This property defines how much a flex item should grow relative to the other items in the flex container when there is extra space available.

 

.item {
  flex-shrink: 1; /* This item will shrink if necessary */
}

.item {
  flex-basis: 200px; /* This item will start at 200px wide */
}

.item {
  flex: 1 1 200px; /* flex-grow | flex-shrink | flex-basis */
}

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      background-color: lightgray;
      padding: 20px;
    }

    .item {
      background-color: lightblue;
      width: 100px;
      height: 100px;
      margin: 10px;
      flex-grow: 1;
    }

    .item1 {
      order: 3;
    }

    .item2 {
      order: 2;
    }

    .item3 {
      order: 1;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

</body>
</html>
Run ›
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.