Saya menggunakan spasi antar/spasi secara merata untuk mencoba dan memiliki jarak yang sama antara elemen dan berfungsi dengan baik. Apa yang saya coba lakukan adalah mengurangi ruang di antara mereka setelah membaginya secara merata. Saya tidak dapat menemukan solusi yang berfungsi. Saya telah mencoba ketinggian garis dan memanipulasi margin tetapi tidak berhasil. Apakah mungkin untuk mengurangi ukuran setelah elemen spasi secara merata? Jika tidak ada cara yang tepat untuk menempatkan elemen ruang secara merata dan juga mengontrol jaraknya. Bantuan apa pun dihargai. Terima kasih sebelumnya.

Catatan: Saya ingin item melayang ke kanan atau ke kiri tidak di tengah!

Juga, ini adalah satu-satunya tautan SO yang dapat saya temukan tentang ini: Cara mengurangi spasi antar item di flexbox justify-content: space-between

Siapapun yang downvote, MENGAPA??

.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>

Pembaruan: Juga, coba properti celah seperti yang disarankan oleh @mianbato oleh saya tidak tahu cara mengatur item dalam satu baris, bukan kolom.

.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 November 2021, 11:46
space-evenly berarti browser mengontrol ini. Apa sebenarnya yang ingin Anda capai?
 – 
connexo
27 November 2021, 11:52
Sudahkah Anda mencoba dengan properti gap?
 – 
mianbato
27 November 2021, 11:53
Elemen ruang secara merata dan juga mengontrol jaraknya adalah yang dibutuhkan
 – 
seriously
27 November 2021, 11:56
Itu adalah kontradiksi.
 – 
connexo
27 November 2021, 12:03
Barusan coba gak bisa lihat update di atas
 – 
seriously
27 November 2021, 12:03

4 jawaban

Anda dapat mencoba dengan display: grid dan kemudian menyesuaikan spasi dengan grid-gap yang telah saya setel ke 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 November 2021, 12:03

Menggunakan properti tampilan fleksibel dan celah

.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 November 2021, 12:11
Ini yang saya butuhkan terima kasih
 – 
seriously
27 November 2021, 12:14
Jika ini yang Anda inginkan, Anda melakukan pekerjaan yang mengerikan dalam menjelaskan apa yang Anda butuhkan.
 – 
connexo
27 November 2021, 12:14
Bagaimana tepatnya meningkatkan @connexo
 – 
seriously
27 November 2021, 12:14
"[...] itu berfungsi dengan baik. Apa yang saya coba lakukan adalah mengurangi ruang di antara mereka setelah membaginya secara merata [...]" Kemudian jalankan cuplikan Anda. Jawaban saya adalah satu-satunya dari 5 yang melakukan apa yang Anda minta. Tanpa sepatah kata pun Anda mengatakan Anda tidak ingin mereka terpusat. Anda mengatakan berfungsi dengan baik dan Saya mencoba mengurangi jarak antara mereka.
 – 
connexo
27 November 2021, 12:15
Saya secara khusus mengatakan sesuatu yang terkait dengan ruang secara merata dan ruang secara merata tidak pernah memusatkan item dalam div. Anda dapat menambahkan suntingan ke pertanyaan saya di mana saya salah @connexo
 – 
seriously
27 November 2021, 12:18

Anda dapat menggunakan 'justify-content: center' dan kemudian menggunakan 'flex-basis: [some-value]' untuk menyesuaikan dengan kebutuhan Anda;

.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 November 2021, 12:14
Ada nilai seperti 'max-content', 'min-content', 'fit-content' yang digunakan untuk 'flex-basis';
 – 
VahidM
27 November 2021, 12:17

Jika Anda ingin mengedit nilai margin elemen clild setelah Anda menggunakan spasi antar / spasi secara merata ke elemen induk, margin harus diberikan ke elemen anak, bukan elemen induk.

.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 November 2021, 12:15