Extra space because of flex wrap

Question

I am using flex-wrap. if textBox are more then width available in container and in the end there is add button now if things are in single line it's look perfect

but if there are more textBox then width available it shift to next line thats fine but because of that there is too much space left between button and text box

which looks very odd.. i tried many ways but didn't get succeed to place button just next to textBox of 1st line.

.container{
    background: #E3E3E3;
    width: 500px;
    display: flex;
}

.textContainer{
    background: #AFACAC;
    display: flex;
    flex-wrap: wrap;
}

.textContainer div{
    background: #E3FF33;
    height: 30px;
    padding: 5px;
    margin: 5px;
}

.addBtn{
    background: #5C5AF5;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px
}

<body>
    <div class="container">
        <div class="textContainer">
            <div>aaaaa</div>
            <div>eeeeee</div>
            <div>ee</div>
            <div>cccc</div>
            <div>ggg</div>
            <div>ggggggggg</div>
            <div>uuu</div>
            <div>12222qqqqqq</div>
            <div>qqq</div>
            <div>zzzzzzzz</div>
        </div>
        <div class="addBtn">
            <span>+</span>
        </div>
    </div>
</body>

why don't you reduce the margin like this `.textContainer div {margin: 5px 3px;}` ? `margin: 5px;` is required ? — Tanim, Oct 28 '20 at 06:52

Warden330 · Answer 1 · 2020-10-28T07:06:00.727

If you add a rule for the individual flex-lines like justify-content: space-between; Or jsutify-content: space-evenly. It will adjust to whatever number of Elements you add and display them in a more responsive way. See the examples below.

Edit: at the end you can find a 3rd example which uses specific margin-rules instead of flex-rules. I personally dont prefer this but it could look neater in your case.

with space-between

.container{
    background: #E3E3E3;
    width: 500px;
    display: flex;
}

.textContainer{
    background: #AFACAC;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.textContainer div{
    background: #E3FF33;
    height: 30px;
    padding: 5px;
    margin: 5px;
}

.addBtn{
    background: #5C5AF5;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px
}

<body>
    <div class="container">
        <div class="textContainer">
            <div>aaaaa</div>
            <div>eeeeee</div>
            <div>ee</div>
            <div>cccc</div>
            <div>ggg</div>
            <div>ggggggggg</div>
            <div>uuu</div>
            <div>12222qqqqqq</div>
            <div>qqq</div>
            <div>zzzzzzzz</div>
        </div>
        <div class="addBtn">
            <span>+</span>
        </div>
    </div>
</body>

with space-evenly

.container{
    background: #E3E3E3;
    width: 500px;
    display: flex;
}

.textContainer{
    background: #AFACAC;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.textContainer div{
    background: #E3FF33;
    height: 30px;
    padding: 5px;
    margin: 5px;
}

.addBtn{
    background: #5C5AF5;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px
}

<body>
    <div class="container">
        <div class="textContainer">
            <div>aaaaa</div>
            <div>eeeeee</div>
            <div>ee</div>
            <div>cccc</div>
            <div>ggg</div>
            <div>ggggggggg</div>
            <div>uuu</div>
            <div>12222qqqqqq</div>
            <div>qqq</div>
            <div>zzzzzzzz</div>
        </div>
        <div class="addBtn">
            <span>+</span>
        </div>
    </div>
</body>

margin-rules, commented the css code where i changed it

.container{
    background: #E3E3E3;
    width: 500px;
    display: flex;
}

.textContainer{
    background: #AFACAC;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.textContainer div{
    background: #E3FF33;
    height: 30px;
    padding: 5px;
    /*new margin-rules*/
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: auto;
}

.addBtn{
    background: #5C5AF5;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px
}

<body>
    <div class="container">
        <div class="textContainer">
            <div>aaaaa</div>
            <div>eeeeee</div>
            <div>ee</div>
            <div>cccc</div>
            <div>ggg</div>
            <div>ggggggggg</div>
            <div>uuu</div>
            <div>12222qqqqqq</div>
            <div>qqq</div>
            <div>zzzzzzzz</div>
        </div>
        <div class="addBtn">
            <span>+</span>
        </div>
    </div>
</body>

Extra space because of flex wrap

1 Answers1