Reka bentuk Flexbox: Saya mahu semua sisi gelembung teks disentuh

Question

.fm-bubbles {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100px;
}
.fm-bubble {
  flex: 1 1 10%;
  height: max-content;
  border: 1px solid royalblue;
  border-radius: 5px;
}

        <div class="fm-content">
          <div class="fm-bubbles">
            <p class="fm-bubble">Lorem, ipsum.</p>
            <p class="fm-bubble">lorem</p>
            <p class="fm-bubble">adsadad</p>
            <p class="fm-bubble">sss</p>
            <p class="fm-bubble">asdasda asdasda</p>
            <p class="fm-bubble">asss</p>
            <p class="fm-bubble">sss</p>
            <p class="fm-bubble">asdas asd</p>
            <p class="fm-bubble">adadaddd</p>
            <p class="fm-bubble">adadasd</p>
            <p class="fm-bubble">addd</p>
            <p class="fm-bubble">adadd</p>
            <p class="fm-bubble">ss</p>
          </div>

Pada masa ini kotak saya hanya menyentuh secara mendatar, tetapi saya juga mahu ia menyentuh secara menegak. Saya cuba mencari maklumat mengenai perkara ini, tetapi apabila saya menemui sesuatu yang berkesan, ia memberi mereka ketinggian lebih daripada yang mereka perlukan.

Answer 1

p 标签默认有一个 margin 属性。设置 margin: 0 untuk menetapkan jarak menegak.

EDIT: Ini tidak mencipta letak batu, cuma mengalih keluar ruang antara kotak.

.fm-bubbles {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100px;
}

.fm-bubble {
  flex: 1 1 10%;
  border: 1px solid royalblue;
  border-radius: 5px;
  margin: 0;
}

  

    
Lorem, ipsum.
    
lorem
    
adsadad
    
sss
    
asdasda asdasda
    
asss
    
sss
    
asdas asd
    
adadaddd
    
adadasd
    
addd
    
adadd
    
ss
  

Edit 2

Anda boleh:

align-items: flex-start;
   align-content: flex-start;

Kepada ibu bapa fm-bubbles. Ini akan membuatkan kanak-kanak mengekalkan ketinggian kandungannya dan menghilangkan ruang menegak antara kanak-kanak.

.fm-bubbles {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100px;
  align-items: flex-start;
  align-content: flex-start;
}

.fm-bubble {
  flex: 1 1 10%;
  border: 1px solid royalblue;
  border-radius: 5px;
  margin: 0;
}

  

    
Lorem, ipsum.
    
lorem
    
adsadad
    
sss
    
asdasda asdasda
    
asss
    
sss
    
asdas asd
    
adadaddd
    
adadasd
    
addd
    
adadd
    
ss