Solution 1 :
p tags have a margin property by default. Set the margin: 0 to fix the vertical spacing.
EDIT : This does not create a masonry layout , just removes the space between the boxes.
.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;
}<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>
</div>
EDIT 2
You can:
align-items: flex-start;
align-content: flex-start;
to the parent fm-bubbles. This will keep the children the height of their content, and remove the space between the children vertically.
.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;
}<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>
</div>
Solution 2 :
I had prepared the code for your solution take it hope soo you will like it…
HTML
<body>
<div class="container">
<div class="fm-content-1">
<p class="fm-bubble">Lorem, ipsum.</p>
<p class="fm-bubble">lorem</p>
<p class="fm-bubble">sss</p>
<p class="fm-bubble">adsadad</p>
</div>
<div class="fm-content-2">
<p class="fm-bubble bubble2">asdasda</p>
<p class="fm-bubble bubble2">asss</p>
</div>
<div class="fm-content-3">
<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>
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container { width: 100%;
height: 100px;
background-color: lightblue;
display: flex;
flex-direction: column;
}
.fm-bubble {
width: 100%;
height: max-content;
border: 1px solid royalblue;
border-radius: 5px;
}
.fm-content-1 {
width: 100%;
display: flex;
height: max-content;
justify-content: space-between;
}
.fm-content-2 {
width: 100%;
display: flex;
height: 60%;
align-items: stretch;
justify-content: space-between;
}
.bubble2 {
height: 100%;
width: fit-content;
}
.fm-content-3 {
width: 100%;
display: flex;
height: max-content;
justify-content: space-between;
}
Problem :
This question already has answers here :
Closed 19 days ago .
.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>
At the moment my boxes are only touching each other horizontally, but i also want them to be touching vertically. I have tried to search for information about this, but when I do find something that works, it gives them more height than they need.
Comments
Comment posted by masonry layout
Touching on all sides? Are you thinking of
Comment posted by disinfor
Ah…you you want the boxes to be only the height of the content and touch. My answer below removes the vertical spacing, but doesn’t create a masonry layout (since flexbox does not do that).
Comment posted by Stephen P
Using the browser inspector on disinfor’s answer and playing around with your styles — if I
Comment posted by christian_l30
thank you! Is there a way to also make the child elements (fm-bubble) to only get the height they need? Ive tried “height: max-content” but that brings me the issue of getting whitespace vertically again…
Comment posted by this answer
@christian_l30 maybe something like
Comment posted by disinfor
@christian_l30 I updated my answer. Doesn’t do masonry, but removes the space, while making the height of individual
Comment posted by christian_l30
@disinfor Yess thank you! I’m going to look into masonry layouts!
Post navigation
