搜尋

首頁  >  問答  >  主體

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

.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>

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

P粉002546490P粉002546490231 天前355

全部回覆(1)我來回復

  • P粉738346380

    P粉7383463802024-04-02 00:50:33

    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

    回覆
    0
  • 取消回覆