Tutorials


CSS justify-content property


The justify-content property in CSS is used within a flex container to align and distribute flex items along the main axis of the container. It controls how space is distributed between and around flex items and can be used to center, space out, or align items to the start or end of the container.

Basic Syntax

selector {
  justify-content: value;
}

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: center; /* Change this value to see different alignment options */
    }
    .item {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: lightcoral;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

In this example, justify-content: center; centers the flex items horizontally within the container.

Values for justify-content

1. flex-start (default)

  • Description: Aligns flex items to the start of the container along the main axis. This is the default value.
  • Use Case: Use this value when you want items to align at the beginning of the container.
.container {
  justify-content: flex-start; /* Align items to the start of the container */
}

2. flex-end

  • Description: Aligns flex items to the end of the container along the main axis.
  • Use Case: Use this value when you want items to align at the end of the container.
.container {
  justify-content: flex-end; /* Align items to the end of the container */
}

3. center

  • Description: Centers flex items within the container along the main axis.
  • Use Case: Use this value to center items horizontally or vertically within the container.
.container {
  justify-content: center; /* Center items within the container */
}

4. space-between

  • Description: Distributes flex items evenly along the main axis, with the first item at the start and the last item at the end. The remaining space is distributed evenly between the items.
  • Use Case: Use this value to space items out with equal gaps between them.
.container {
  justify-content: space-between; /* Distribute items with space between them */
}

5. space-around

  • Description: Distributes flex items evenly along the main axis with equal space around each item. The space on either end of the container is half the size of the space between items.
  • Use Case: Use this value to create a layout with equal space around each item, including the edges of the container.
.container {
  justify-content: space-around; /* Distribute items with space around each item */
}

6. space-evenly

  • Description: Distributes flex items evenly along the main axis with equal space between them, including the space before the first item and after the last item.
  • Use Case: Use this value to evenly space out items across the entire width of the container, including the edges.
.container {
  justify-content: space-evenly; /* Distribute items with equal space between them */
}

Practical Examples

Example 1: Align Items to the Start

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: flex-start;
    }
    .item {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: lightblue;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

In this example, items are aligned to the start of the container.

Example 2: Space Items Evenly

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-evenly;
    }
    .item {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: lightgreen;
      border: 1px solid green;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

Here, the items are spaced evenly across the container, including the edges.

Example 3: Center Items

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: center;
    }
    .item {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: lightcoral;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

In this example, items are centered within the container.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about