How to add a space between the flex container?

How to set flex space between the flex elements?

Flexbox, or the flexbox module, is a layout model in HTML. The main purpose of this tag or layout is to give flex space between the elements present in the container. We will show you how to add spaces in flex elements using CSS.

How to add spaces between flexbox

If you are just using a page to work on, you can easily make spaces between the elements, but if you a using a webpage to set flex spaces between the elements, you would require to the flexbox rule. To create such, you will have to use an HTML-style tag. It will help to make or change the style of the elements as per your choice.

What is flex in CSS?

The flex in CSS can be defined as a shorthand property which is used to set the property of the elements, like how it will shrink or grow to fit in the given space or to set some specific flex spaces between items in the flex element.

Syntax to set space between flex elements

You can use the CSS justify-content property to set space between the flex element or flexbox.

Syntax:

To set space between the lines:

If you want to put space between the element, you can use

To set space -around the elements:

If you want to set space-around flex, you can use this syntax

You can see this example and use it as source code to set spaces between flex elements. In the following example, the container has 3 items, and each flex item will be given space accordingly.

<!DOCTYPE html>
<html>
<head>
<title>Eample of Space between flexbox</title>
<style>
.flex2 {
display: flex;
justify-content: space-around;
background-color: orange;
}
.flex3 {
display: flex;
justify-content: space-between;
background-color: yellow;
}
.flex-items {
background-color: #f4f4f4;
width: 100px;
height:50px;
margin: 10px;
text-align: center;
font-size: 40px;
}
h3 {
text-align:center;
}
.boardinfinity {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</style>
</head>

<body>
<div class = "boardinfinity"> Board Infinity </div>
<h3>Example of Space Between Flexbox</h3>

<br>
<b>justify-content: space-around </b>
<div class="flex2">
<div class="flex-items">a</div>
<div class="flex-items">b</div>
<div class="flex-items">c</div>
</div>
<br>
<b>justify-content: space-between </b>
<div class="flex3">
<div class="flex-items">A</div>
<div class="flex-items">B</div>
<div class="flex-items">C</div>
</div>
<br>

</body>
</html>

write your code here: Coding Playground

Source code for justifying the flex container space in flex items. In the above picture, you can see that we have used space-around and space-between to set space for the flex item in the flex container. You will have to use justify-content syntax in CSS to set a place or space between those items.

If you use this example as your source code to set space between the elements, your desired result will be like this:

Output:

The justify-content property was used in the example as mentioned above with space-between and space-around values. The elements are distributed uniformly (with space between them) down the line by using the space-between value. The start line is where the first item is, and the finish line is where the last thing is. The elements having before, between, and after spacing are shown in the space-around value.