Kecilkan bekas agar sesuai dengan elemen kanak-kanak yang dibalut

Question

Saya cuba memikirkan bagaimana flexbox berfungsi (sepatutnya berfungsi?...) untuk situasi seperti ini:

.holder {
  width: 500px;
  background: lightgray;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.v2 {
  width: 320px;
}
.child {
  display: inline-block;
  border: 1px solid black;
  padding: 30px 0px;
  text-align: center;
}

<div class="holder">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a
    <br>glance</div>
  <div class="child">After coverage
    <br>ends</div>
  <div class="child">Forms &amp;
    <br>documents</div>
</div>

Ini adalah JSFiddle

Masalahnya ialah apabila terdapat ruang yang cukup untuk memegang elemen, saya mendapat anak ketat yang bagus dengan jarak yang sekata antara kanak-kanak. (pertama, blok div atas)

Namun, apabila ruang kanak-kanak tidak mencukupi dan teks mula dibalut, semuanya pergi ke arah yang pelik - kanak-kanak tidak lagi muat dengan selesa, dan walaupun selepas membungkus, masih terdapat ruang yang cukup di sekeliling kanak-kanak flex kerana Adakah' tidak sesuai lagi dan ruang sekeliling tidak berpeluang untuk berfungsi (blok div kedua)

Walau bagaimanapun, jika saya menambah pemutus talian manual di mana pemutus talian automatik berlaku, semuanya disusun dengan cara yang "sepatutnya"... (blok bawah, ketiga)

Apa yang saya mahukan ialah sentiasa meletakkan anak-anak di dalam kotak mereka (sempadan hitam) dan apa sahaja ruang yang tinggal akan diagihkan sama rata di antara mereka tanpa saya menambah pemutus talian manual (ini bukan pilihan) setakat yang saya bimbangkan)

Adakah ini mungkin? ...

Answer 1

Lihat lebih dekat perubahan saya Fiddle:

• .holder width 到 max-width （在 .v kategori)
• Diubah suai .holder 以 wrap 和 space-around anak-anaknya
• Tambah 2 lagi .v kelas
untuk kejelasan
• Dipadamkan
的
• Dan, paling penting, tambahkan flex: 0 0 pada flex: 0 0 添加到 .child.child

Flexbox hampir selalu perlu disediakan max-width，这比widthuntuk menjadi lebih fleksibel. Hasilnya kelihatan baik bergantung pada apa yang anda perlukan .children 的行为方式，修改 flex: 0 0 中的 flex-grow 和 flex-shrink 来满足您的需求。 （flex: 1 0)

...Tiada JavaScript diperlukan...

Codrops Flexbox Reference sangat berguna untuk memahami susun atur flexbox.

Answer 2

Dalam CSS, bekas induk tidak tahu bila bekas anaknya membungkus. Jadi ia terus mengembangkan saiznya, mengabaikan apa yang berlaku secara dalaman.

Dalam erti kata lain, penyemak imbas memaparkan bekas pada lata awal. Ia tidak mengalir semula dokumen apabila kanak-kanak membungkus.

Inilah sebabnya bekas tidak mengecut membalut reka letak yang lebih sempit. Ia hanya berjalan seolah-olah tiada apa yang dibalut, seperti yang dibuktikan oleh ruang yang dikhaskan di sebelah kanan.

Panjang maksimum ruang putih mendatar ialah panjang elemen yang dijangka hadir oleh bekas.

Dalam demo di bawah, anda boleh melihat ruang putih keluar dan masuk apabila tetingkap diubah saiz secara mendatar: DEMO

Anda memerlukan penyelesaian JavaScript (lihat di sini dan di sini)... atau pertanyaan media CSS (lihat di sini).

Apabila mengendalikan pembalut teks, text-align: right pada bekas mungkin membantu dalam beberapa kes.