.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