Pusatkan item lentur dalam bekas apabila dikelilingi oleh item lentur lain

Question

Saya mempunyai flexbox (lihat coretan kod di bawah sebagai contoh).

Saya mahu menyediakannya supaya dalam semua kes,

berada di tengah-tengah flex-box akan mengalir di sekelilingnya, Berdasarkan penanda mereka.

Saya pada asasnya mencari align-self kod CSS, tetapi untuk paksi utama, bukan paksi mendatar (yang mungkin membantu menjelaskan perkara yang saya minta).

Saya juga menggunakan margin: auto; pada

yang saya pelajari selepas membaca artikel ini (halaman yang bagus, tetapi masih meninggalkan saya dengan soalan berikut - kecuali saya tidak memahami sepenuhnya segala-galanya).

Ini ialah kod yang saya dapat:

<code>.bekas {
  align-item: tengah;
  sempadan: 1px merah pepejal;
  paparan: flex;
  justify-content: pusat;
  lebar: 100%;
}
h2 {
  margin: auto;
]</code>

<code><div class="container">
  <h2>Saya seorang h2</h2>
  <span>Saya span 1</span>
  <span>Saya span 2</span>
  <span>Saya span 3</span>
</div>
<div class="container">
  <span>Saya span 1</span>
  <span>Saya span 2</span>
  <span>Saya span 3</span>
  <h2>Saya seorang h2</h2>
  <span>Saya span 4</span>
  <span>Saya span 5</span>
  <span>Saya span 6</span>
</div>
<div class="container">
  <span>Saya span 1</span>
  <span>Saya span 2</span>
  <h2>Saya seorang h2</h2>
  <span>Saya span 3</span>
</div></code></pra>


</p>
<blockquote>
<p>Untuk menyatakan semula soalan saya sepenuhnya: Saya ingin tahu cara memusatkan <kod><h2></kod> pada halaman saya supaya tidak kira apa<kod><span></ di mana kod>, <kod><h2></kod> akan sentiasa berada di <strong>tengah mati</strong> </p>
</blockquote>
<p>P.S.: Saya bersedia menggunakan JavaScript dan jQuery, tetapi saya lebih suka cara CSS tulen untuk melakukan ini. </p>
<hr/>
<p>Selepas Michael Benjamin membalas: </p>
<p>Jawapannya membuatkan saya berfikir. Walaupun saya masih belum menemui cara untuk melakukan ini, saya percaya yang berikut adalah langkah ke arah yang betul: </p>
<p><strong>HTML</strong></p>
<pre class="brush:php;toolbar:false;"><div class="bekas">
  <div>
    <span>Saya span 1</span>
    <span>Saya span 2</span>
    <span>Saya span 3</span>
  </div>
  <h2>Saya seorang h2</h2>
  <div>
    <span>Saya span 4</span>
    <span>Saya span 5</span>
    <span>Saya span 6</span>
  </div>
</div>

CSS

.container div {
  lentur: 1 1 auto;
  text-align: tengah;
}
h2 {
  lentur: 0 0 auto;
  margin: auto;
}

<code>.bekas {
  align-item: tengah;
  sempadan: 1px merah pepejal;
  paparan: flex;
  justify-content: pusat;
  lebar: 100%;
}
.container div {
  lentur: 1 1 auto;
  text-align: tengah;
}
h2 {
  lentur: 0 0 auto;
  margin: auto;
}</code>

  

  
  
Saya seorang h2
  

    Saya span 1
    Saya span 2
    Saya span 3
  


  

    Saya span 1
    Saya span 2
    Saya span 3
  
  
Saya seorang h2
  

    Saya span 4
    Saya span 5
    Saya span 6
  


  

    Saya span 1
    Saya span 2
  
  
Saya seorang h2
  

    Saya span 3
  




Pada asasnya, teorinya ialah walaupun jumlah bilangan  diketahui terdapat tiga elemen secara keseluruhan: 
< ;h2> < div>


Seperti yang anda lihat dalam coretan kod di atas, saya telah mencuba (flex: 0 0 auto dan flex: 1 1 auto dsb.) untuk membenarkan Ia berfungsi tetapi masih belum berfungsi. Bolehkah sesiapa memberitahu saya jika ini adalah langkah ke arah yang betul dan bagaimana untuk menolak ini ke dalam produk sebenar? 
            

Answer 1

Salah satu cara ialah menambah rentang kosong pada kedua-dua belah dan kemudian tetapkan rentang dan h2 kepada beberapa nilai flex seperti ini:

.container {
  align-items: center;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  width: 100%;
}
h2 {
  margin: auto;
  text-align: center;
  flex: 3 0;
}
span{
  flex: 1 0;
}

<div class="container">
<span></span>
<span></span>
<span></span>
  <h2>I'm an h2</h2>
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <span>I'm span 3</span>
</div>
<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>
<div class="container">
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <span></span>
  <h2>I'm an h2</h2>
  <span>I'm span 3</span>
  <span></span>
  <span></span>
</div>

Jadi anda pastikan ruang di kedua-dua belah adalah sama. Satu-satunya masalah ialah anda perlu memutuskan sejauh mana anda mahu h2 ambil.

Answer 2

Sifat penjajaran fleksibel berfungsi dengan memperuntukkan ruang yang ada di dalam bekas.

Jadi apabila item Flex berkongsi ruang dengan item lain, tiada cara satu langkah untuk memusatkannya melainkan jumlah panjang item adik-beradik di kedua-dua belah adalah sama.

Dalam contoh kedua, h2 两侧的跨度总长度相等。因此，h2 sepenuhnya berada di tengah-tengah bekas.

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

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