I was using space between/ space evenly to try and have equal spacing between elements and it works fine. What I am trying to do is reduce the space between them after evenly splitting them. I couldn't find any working solution. I have tried line-height and manipulating the margin but it didn't work. Is it possible to reduce the size after spacing elements evenly? If there isn't what is the proper way to space elements evenly and also control their spacing. Any help is appreciated. Thanks in advance.
Note: I want the items to either float right or left not centered!
Also, this is the only SO link I could find about this: How to reduce space between items in flexbox justify-content: space-between
.leftHeaderItems {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
position: absolute;
right: 0%;
width: 100%;
height: 7%;
margin: 0px;
background: green;
}<div class="leftHeaderItems">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
</div>Update: Also, tried gap property as suggested by @mianbato by I can't figure out how to set items in a row, not a column.
.leftHeaderItems {
display: grid;
justify-content: space-evenly;
align-items: center;
position: absolute;
left: 0%;
width: 30%;
height: 100%;
grid-row-gap: 3px;
background: inherit;
}<div class="leftHeaderItems">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
</div>You can try with display: grid and then adjust spacing with grid-gap which I have set to 12px
.leftHeaderItems {
align-items: center;
position: absolute;
right: 0%;
width: 100%;
height: auto;
margin: 0px;
background: green;
justify-content: center;
grid-column: 1 / -1;
display: grid;
grid-gap: 12px;
grid-template-columns: repeat(5, auto);
flex-direction: column;
margin: 0;
}<div class="leftHeaderItems">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
</div>When you use space-evenly that means you want the browser to calculate and apply the distancing for you.
If you want control over the space between the items, use column-gap.
You can control the horizontal alignment using align-content on the container element:
| align-content | result in LTR | result in RTL |
|---|---|---|
| center | centered | centered |
| flex-start | left | right |
| flex-end | right | left |
.leftHeaderItems {
background: green;
display: flex;
column-gap: 12px;
flex-direction: row;
}<div class="leftHeaderItems">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
</div>Using display flex and gap property
.leftHeaderItems{
display: flex;
flex-direction: row;
align-items: center;
gap:1rem;
height: 7%;
padding-left: 1rem;
background: green;
}<div class="leftHeaderItems">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
</div>