Conception Flexbox : je veux que tous les côtés de la bulle de texte se touchent

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>

Actuellement, mes boîtes ne se touchent qu'horizontalement, mais j'aimerais aussi qu'elles se touchent verticalement. J'ai essayé de chercher des informations à ce sujet, mais lorsque j'ai trouvé quelque chose qui fonctionnait, cela leur donnait plus de hauteur que nécessaire.

Answer 1

p 标签默认有一个 margin 属性。设置 margin: 0 pour fixer l'espacement vertical.

EDIT : Cela ne crée pas de disposition en maçonnerie, supprime simplement l'espace entre les boîtes.

.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

Vous pouvez :

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

Aux parentsfm-bubbles. Cela permettra à l'enfant de maintenir la hauteur de son contenu et d'éliminer l'espace vertical entre les enfants.

.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