CSS justify-content

CSS is a markup language used to describe web page styles. It is widely used in web design and development. In CSS, the justify-content property controls the alignment of elements within a container along the main axis (i.e., horizontally or vertically). This article will provide a detailed introduction to the justify-content property, common values, and examples.

1. Overview

The justify-content property sets the alignment of elements within a container along the main axis. This property only applies to containers using flexbox or grid layouts, and only to containers with multiple child elements.

In Flexbox, the main axis can be horizontal (the default) or vertical, while in Grid, the main axis can be horizontal or vertical. The justify-content property can take multiple values.

2. Values

justify-content can be set to the following values:

• flex-start: Left alignment (horizontally) or top alignment (vertically)
• flex-end: Right alignment (horizontally) or bottom alignment (vertically)
• center: Center alignment
• space-between: Justify elements at both ends, with equal spacing between them
• space-around: Equal spacing around each element
• space-evenly: Equal spacing between elements and at both ends

3. How to Use

To use the justify-content property, first create a container with Flexbox or Grid layout. Here’s an example:

<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>

Next, style the container in CSS and use the justify-content property to control the alignment of elements along the main axis. Here’s a sample code:

.container {
display: flex;
justify-content: center;
}

.item {
width: 100px;
height: 100px;
background-color: #f00;
margin: 10px;
}

In the above code, the .container class sets display: flex to create a flexbox container, and uses justify-content: center to center the elements within the container. The .item class defines the styles for the child elements within the container.

Opening the above sample code in a browser, you can see that elements A, B, and C are centered within the container.

4. Demo

4.1 flex-start

The following example demonstrates the use of justify-content: flex-start aligns elements to the left (horizontally) or top (vertically). </p>
<pre><code class="language-css line-numbers">.container {
display: flex;
justify-content: flex-start;
}


In the above code, the justify-content property of the .container class is set to flex-start.

4.2 flex-end

The following example demonstrates using justify-content: flex-end to align elements to the right (horizontally) or bottom (vertically).

.container {
display: flex;
justify-content: flex-end;
} 

In the above code, the justify-content property of the .container class is set to flex-end.

4.3 center

The following example demonstrates using justify-content: center to center an element.

.container {
display: flex;
justify-content: center;
}

In the above code, the justify-content property of the .container class is set to center.

4.4 space-between

The following example demonstrates using justify-content: space-between to align elements on both ends and provide equal space between them.

.container {
display: flex;
justify-content: space-between;
} 

In the above code, the justify-content property of the .container class is set to space-between.

4.5 space-around

The following example demonstrates using justify-content: space-around to provide equal space around each element.

.container {
display: flex;
justify-content: space-around;
} 

In the above code, the justify-content property of the .container class is set to space-around.

4.6 space-evenly

The following example demonstrates using justify-content: space-evenly to create equal spacing between and on both sides of an element.

.container {
display: flex;
justify-content: space-evenly;
}

In the above code, the justify-content property of the .container class is set to space-evenly.

5. Summary

This article details the usage and common values ​​of the justify-content property in CSS. By manipulating this property, you can flexibly adjust the alignment of elements within a container along the main axis to achieve various layout effects. Mastering the use of the justify-content property will help improve your web design and development efficiency.