Flexbox-Design: Ich möchte, dass sich alle Seiten der Textblase berühren

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>

Derzeit berühren sich meine Boxen nur horizontal, ich möchte aber auch, dass sie sich vertikal berühren. Ich habe versucht, nach Informationen dazu zu suchen, aber als ich etwas gefunden habe, das funktionierte, gab es ihnen mehr Höhe, als sie brauchten.

Answer 1

p 标签默认有一个 margin 属性。设置 margin: 0 来固定垂直间距。

编辑：这不会创建砖石布局，只是删除盒子之间的空间。

.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
  

编辑2

你可以：

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

到父级 fm-bubbles。这将使子级保持其内容的高度，并消除子级之间的垂直空间。

.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