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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You could use 'justify-content: center' and then use 'flex-basis: [some-value]' to adjust to your need;

.leftHeaderItems {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-basis: 0;
  position: absolute;
  right: 0%;
  width: 100%;
  height: 7%;
  margin: 0px;
  background: green;
}

.leftHeaderItems > p {
  flex-basis: 90px;
}

CodePudding user response：

if you want to edit margin value of clild elements after you use space between / space evenly to parent element, margin should be given to the child elements, not the parent element.

.leftHeaderItems {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  right: 0%;
  width: 100%;
  height: 7%;
  background: green;
}
.leftHeaderItems > p {
  margin : auto 10px; 
}