CSS justify-content Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 26 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The justify-content property in CSS is used in flexbox layouts to align and distribute space between items along the main axis of a container.

This property is particularly useful for controlling the spacing and alignment of items within a flex container, allowing for flexible and responsive design layouts.

💡 Syntax

The syntax for the justify-content property is:

Syntax

Copied

.container {
  justify-content: value;
}

Here, value can be one of several keywords that specify how the flex items are aligned and distributed within the container.

🎛️ Default Value

The default value of the justify-content property is flex-start, which aligns items at the beginning of the container along the main axis.

🏠 Property Values

Value	Description
flex-start	Aligns items at the start of the container.
flex-end	Aligns items at the end of the container.
center	Centers items within the container.
space-between	Distributes items evenly with the first item at the start and the last item at the end.
space-around	Distributes items evenly with equal space around them.
space-evenly	Distributes items evenly with equal space between and around them.

📄 Example

In this example, we'll create a simple flexbox container and demonstrate how different justify-content values affect the alignment of its items.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS justify-content Example</title>
  <style>
    .container {
      display: flex;
      border: 1px solid #000;
      height: 100px;
    }
    .item {
      width: 50px;
      height: 50px;
      background-color: #ff5733;
      margin: 5px;
    }
  </style>
</head>
<body>
  <h1>Justify-Content Example</h1>

  <h2>flex-start</h2>
  <div class="container" style="justify-content: flex-start;">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

  <h2>flex-end</h2>
  <div class="container" style="justify-content: flex-end;">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

  <h2>center</h2>
  <div class="container" style="justify-content: center;">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

  <h2>space-between</h2>
  <div class="container" style="justify-content: space-between;">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

  <h2>space-around</h2>
  <div class="container" style="justify-content: space-around;">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

  <h2>space-evenly</h2>
  <div class="container" style="justify-content: space-evenly;">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

</body>
</html>

🖥️ Browser Compatibility

The justify-content property is widely supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It's always a good idea to test your designs across different browsers to ensure consistent behavior.

🎉 Conclusion

The justify-content property is a versatile tool for aligning and distributing space among items in a flex container.

Whether you're looking to center content, evenly distribute items, or create space between elements, justify-content offers a range of options to help you achieve your desired layout. Experiment with the different values to see how they can enhance your web designs.