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