CODEWITHSUNDEEP
htmlcss
antonkoetzler
antonkoetzler

Reputation: 9

How to edit the padding in between rows within a flexbox

I created a flex box, it's CSS properties are (link to all the code if you need):

.profileContent
{
    display: flex;
    flex-wrap: wrap;

    height: calc(100vh - 430px); width: 90%;

    border: 10px solid #ED303E;
    border-radius: 15px;

    position: relative;
    left: 50%; top: 125px;
    transform: translateX(-50%);
}

My concern here with my website is that the padding between the rows automatically has a great portion in between them as you can see, and only resizing the window does the padding fade away. How do I change this? Default padding and margin options seem inapplicable to this issue. The issue seems to be that this is an individual object around other objects, as writing a flex box on it's own within an HTML document does not cause this padding, such as this file with these contents:

.flexbox {
    display: flex;
    flex-wrap: wrap;
}
    
.box{
    height: 100px;
    width: 100px;
    background-color: coral;
    border: 1px solid black;
}
<div class=flexbox>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
</div>

Upvotes: 0

Views: 42

Answers (2)

antonkoetzler
antonkoetzler

Reputation: 9

The answer was that a seperate div needed to be created. Thus, I needed a .profileContentContainer for the .profileContent flexbox.

Upvotes: 0

Fredrich
Fredrich

Reputation: 111

I would use the "gap" property for flex elements. It works the same as "grid-gap" with grid. "Gap" is basically "grid-gap" for flexbox.

It will automatically add gap between your flex elements.

Upvotes: 1

Related Questions