space-between is a CSS property that does exactly what it says - adds space between elements. If you want to reduce this space, there are different ways to achieve it such as increasing the size of boxes or adjusting the spacing between the items and the container border.
Here are three solutions for you to consider:
1. Swap space-evenly with space-between. This will distribute the elements evenly while considering the container border as an element as well:
.box{
display: flex;
justify-content: space-evenly;
}
.item{
background-color: rgb(255, 157, 0);
width: 50px;
height: 50px;
}
<div class="box">
<div class="item"></div>
<div class="item"></div>
</div>
2. Consider adding margins to elements to control how far they are placed from the container border. In this example, I use a margin value of 100px:
.box{
display: flex;
justify-content: space-between;
}
.item{
background-color: rgb(255, 157, 0);
width: 50px;
height: 50px;
margin: 0 100px;
}
<div class="box">
<div class="item"></div>
<div class="item"></div>
</div>
It's worth noting that distinguishing between margin-left/margin-right may not be necessary as unused margin space is absorbed by flex.
3. Utilize flex-grow to allow items to expand and occupy more space when available:
.box{
display: flex;
justify-content: space-between;
}
.item{
background-color: rgb(255, 157, 0);
width: 50px;
height: 50px;
flex-grow: 0.1;
}
<div class="box">
<div class="item"></div>
<div class="item"></div>
</div>
I hope one or more of these solutions prove helpful to your needs.