Controlling the Amount of Space in justify-content: space-between with CSS

In this article, we’ll learn how to use CSS to control the amount of space in a justify-content: space-between layout. justify-content: space-between is a commonly used layout property in CSS that evenly distributes space between elements within a container, so that they are evenly spaced.

Read more: CSS Tutorial

What is justify-content: space-between?

justify-content is a CSS flex layout property that defines how elements are aligned along their main axis. space-between is a value of justify-content, which evenly distributes the available space between target elements, thus achieving the effect of equal distance between them.

The sample code is as follows:

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

In the example above, we set display: flex; and justify-content: space-between; on the parent container .container. This will evenly distribute the remaining space between the elements within the parent container.

Methods for Controlling the Amount of Space

To control the amount of space in a justify-content: space-between layout, we can use two methods: by adjusting the width of the child elements or by inserting whitespace between them.

Adjusting the Width of Child Elements

One method is to adjust the width of the child elements as needed, thereby controlling the distance between them. This can be achieved by setting the width property or the flex-basis property.

For example, if we want a fixed spacing between two child elements, we can set flex-basis: 30%; for the first child and flex-basis: 70%; for the second. This way, the first child will occupy 30% of the total space, and the second will occupy 70%, and the spacing between them will automatically adjust to the fixed value.

The sample code is as follows:

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

.item1 {
flex-basis: 30%;
}

.item2 {
flex-basis: 70%;
}

Inserting Space Between Items

Another way to control spacing is to insert a space element into the layout. You can use a <div> or <span> element with no content and set it to a block element with a fixed width (or percentage).

The example code is as follows:

<div class="container"> 
<div class="item">Item 1</div> 
<div class="spacer"></div> 
<div class="item">Item 2</div> 
</div> 

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

.spacer { 
flex-basis: 20px; 
} 

In the example above, we insert a blank element, .spacer, into .container and set flex-basis: 20px; for it. This will insert a 20-pixel gap between the two child elements.

Example Description

Let’s use a concrete example to illustrate how to use CSS to control the amount of space in a layout with justify-content: space-between.

Suppose we have a parent container .container that contains three child elements, .item1, .item2, and .item3. We want to have a fixed amount of space between them.

<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> 

To achieve this effect, we can control the distance between the child elements by setting their widths.

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

.item {
flex-basis: 30%;
}

.item1 {
background-color: #ff0000;
}

.item2 {
background-color: #00ff00;
}

.item3 {
background-color: #0000ff;
}

In the example above, we give each child element the same width and set them to take up 30% of the parent container’s space. This will keep the spacing between them equal.

Summary

Using the CSS layout property justify-content: space-between, we can easily control the amount of space between child elements within a container. We can achieve this by adjusting the width of child elements or inserting whitespace between them. This property is very useful when creating layouts that require a certain amount of spacing, such as navigation menus and image galleries. I hope this article helps you understand and use the justify-content: space-between layout.