Bagaimanakah Saya Boleh Memusatkan Item Flex dalam Bekas dengan Item Flex Lain?

Menjajarkan Item Flex Secara Tengah dalam Bekas dengan Item Flex Tambahan

Sifat penjajaran fleksibel memperuntukkan ruang kosong dalam bekas. Oleh itu, secara automatik memusatkan item fleksibel yang dikelilingi oleh orang lain adalah mustahil melainkan gabungan lebar item bersebelahan sama dengan lebar bekas.

Pertimbangkan contoh kedua yang disediakan. Jumlah lebar elemen span adalah sama pada kedua-dua belah elemen h2. Akibatnya, h2 berpusat dengan sempurna di dalam bekas.

<code class="css">.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

p {
  text-align: center;
}

p > span {
  background-color: aqua;
  padding: 5px;
}</code>

<code class="html"><div class="container">
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <span>I'm span 3</span>
  <h2>I'm an h2</h2>
  <span>I'm span 4</span>
  <span>I'm span 5</span>
  <span>I'm span 6</span>
</div>
<p><span>TRUE CENTER</span></p></code>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Item Flex dalam Bekas dengan Item Flex Lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!