Flexbox 設計：我希望文字氣泡的各個側面都接觸

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>

目前我的盒子只是水平接觸，但我也希望它們垂直接觸。我試圖搜索有關此的信息，但是當我確實找到有用的東西時，它給了他們比他們需要的更高的高度。

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