.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.
p
標(biāo)簽?zāi)J(rèn)有一個 margin
屬性。設(shè)置 margin: 0
來固定垂直間距。
編輯:這不會創(chuàng)建磚石布局,只是刪除盒子之間的空間。
.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
。這將使子級保持其內(nèi)容的高度,并消除子級之間的垂直空間。
.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