Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS justify-content Property

Posted in CSS Tutorial
Updated on Oct 03, 2024
By Mari Selvan
👁️ 13 - Views
⏳ 4 mins
💬 1 Comment
CSS justify-content Property

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
Copy To Clipboard
.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

ValueDescription
flex-startAligns items at the start of the container.
flex-endAligns items at the end of the container.
centerCenters items within the container.
space-betweenDistributes items evenly with the first item at the start and the last item at the end.
space-aroundDistributes items evenly with equal space around them.
space-evenlyDistributes 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
Copy To Clipboard
<!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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy