Я использовал пространство между / space равномерно, чтобы попытаться получить равное расстояние между элементами, и он отлично работает. Я пытаюсь уменьшить пространство между ними после их равномерного разделения. Я не нашел рабочего решения. Я пробовал line-height и манипулировал полем, но это не сработало. Можно ли уменьшить размер после равномерного размещения элементов? Если нет, как правильно распределить элементы равномерно, а также контролировать их расстояние. Любая помощь приветствуется. Заранее спасибо.

Примечание. Я хочу, чтобы элементы перемещались вправо или влево не по центру!

Кроме того, это единственная ссылка SO, которую я смог найти по этому поводу: Как уменьшить расстояние между элементами в 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>

Обновление: Кроме того, попробовал свойство gap, предложенное @mianbato, я не могу понять, как установить элементы в строке, а не в столбце.

.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>
0
seriously 27 Ноя 2021 в 11:46
space-evenly означает, что это контролирует браузер. Чего именно вы пытаетесь достичь?
 – 
connexo
27 Ноя 2021 в 11:52
Вы пробовали использовать свойство gap?
 – 
mianbato
27 Ноя 2021 в 11:53
Равномерно размещать элементы, а также контролировать их расстояние - вот что нужно
 – 
seriously
27 Ноя 2021 в 11:56
Это противоречие.
 – 
connexo
27 Ноя 2021 в 12:03
Просто попробовал, не сработало, взгляните на обновление выше
 – 
seriously
27 Ноя 2021 в 12:03

4 ответа

Вы можете попробовать с помощью display: grid, а затем отрегулировать интервал с помощью grid-gap, который я установил на 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>
1
Authentic Science 27 Ноя 2021 в 12:03

Использование свойств гибкости и зазора дисплея

.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>
1
mianbato 27 Ноя 2021 в 12:11
Это то, что мне нужно, спасибо
 – 
seriously
27 Ноя 2021 в 12:14
Если это то, что вы хотели, вы проделали ужасную работу по объяснению того, что вам нужно.
 – 
connexo
27 Ноя 2021 в 12:14
Как именно улучшить @connexo
 – 
seriously
27 Ноя 2021 в 12:14
« [...] все работает нормально. Я пытаюсь уменьшить пространство между ними после равномерного разделения [...] » Затем запустите свой фрагмент. Мой ответ - единственный из 5, который делает то, о чем вы просите. Ни слова вы не сказали, что не хотите, чтобы они были в центре внимания. Вы сказали, что все работает нормально , и я пытаюсь уменьшить расстояние между ними .
 – 
connexo
27 Ноя 2021 в 12:15
Я специально сказал кое-что, связанное с пространством равномерно, и пространство равномерно никогда не центрирует элементы в div. Вы можете отредактировать мой вопрос в том месте, где я ошибся @connexo
 – 
seriously
27 Ноя 2021 в 12:18

Вы можете использовать «justify-content: center», а затем использовать «flex-base: [some-value]», чтобы приспособиться к вашим потребностям;

.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;
}
0
VahidM 27 Ноя 2021 в 12:14
Существуют такие значения, как «max-content», «min-content», «fit-content» для использования в качестве «flex-base»;
 – 
VahidM
27 Ноя 2021 в 12:17

Если вы хотите отредактировать значение поля для элементов clild после того, как вы используете пробел между / space равномерно по отношению к родительскому элементу, маржа должна быть предоставлена ​​дочерним элементам, а не родительскому элементу.

.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; 
}
0
Haraho 27 Ноя 2021 в 12:15