How can I specify with flexbox that two divs have to break line together?

94 Views Asked by At

How can I specify with flexbox that two divs have to break line together? What I'd like in the example bellow is that, when screen gets smaller, the green and the black divs always jump to a new line together without having to nest them in a new div which will complicate and extend the code.

.categories-home-block {
        display:flex; 
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: space-between;
        align-items: center;
        margin: 10px -8px;
    }
    .category-home-card {
        flex-grow: 1;
    }
    .category-home-pic{
        width: auto;
        margin: 25px 5px;
        height: 400px;
        min-width: 200px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .category-home-pic-1 {
        margin-left: 0;
        background-color:red;
    }
    .category-home-pic-2 {
        background-color:blue;
    }
    .category-home-pic-3 {
        background-color:yellow;
    }
    .category-home-pic-4 {
        background-color:green;
    }
    .category-home-pic-5 {
        margin-right: 0;
        background-color:black;
    }
    .category-home-link {
        justify-content: center;
        text-align: center;
    }
    .category-home-link a {
        font: normal 400 18px/22px Montserrat, sans-serif;
        text-decoration: none;
        color: #252a32;
    }
<div class="categories-home-block">
    <div class="category-home-card">
        <div class="category-home-pic category-home-pic-1"></div>
        <div class="category-home-link">
        </div>
    </div>
    <div class="category-home-card">
        <div class="category-home-pic category-home-pic-2"></div>
        <div class="category-home-link">
        </div>
    </div>
    <div class="category-home-card">
        <div class="category-home-pic category-home-pic-3"></div>
        <div class="category-home-link">
        </div>
    </div>
    <div style="display: flex;">
    <div class="category-home-card">
        <div class="category-home-pic category-home-pic-4"></div>
        <div class="category-home-link">
        </div>
    </div>
    <div class="category-home-card">
        <div class="category-home-pic category-home-pic-5"></div>
        <div class="category-home-link">
        </div>
    </div>
    </div>
</div>

1

There are 1 best solutions below

1
On

.categories-home-block {
        display:flex; 
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: space-between;
        align-items: center;
        margin: 10px -8px;
    }
    .category-home-card {
        flex-grow: 1;
    }
    .category-home-pic{
        width: auto;
        margin: 25px 5px;
        height: 400px;
        min-width: 200px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .category-home-pic-1 {
        margin-left: 0;
        background-color:red;
    }
    .category-home-pic-2 {
        background-color:blue;
    }
    .category-home-pic-3 {
        background-color:yellow;
    }
    .category-home-pic-4 {
        background-color:green;
    }
    .category-home-pic-5 {
        margin-right: 0;
        background-color:black;
    }
    .category-home-link {
        justify-content: center;
        text-align: center;
    }
    .category-home-link a {
        font: normal 400 18px/22px Montserrat, sans-serif;
        text-decoration: none;
        color: #252a32;
    }
    /* shaping flex-green-black  */
    .flex-green-black {
        display: flex;
        flex-wrap:wrap;
    }
<div class="categories-home-block">
    <div class="category-home-card">
        <div class="category-home-pic category-home-pic-1"></div>
        <div class="category-home-link">
        </div>
    </div>
    <div class="category-home-card">
        <div class="category-home-pic category-home-pic-2"></div>
        <div class="category-home-link">
        </div>
    </div>
    <div class="category-home-card">
        <div class="category-home-pic category-home-pic-3"></div>
        <div class="category-home-link">
        </div>
    </div>
    <!--creation of a class named: flex-green-black  -->
    <div class="flex-green-black">
    <div class="category-home-card">
        <div class="category-home-pic category-home-pic-4"></div>
        <div class="category-home-link">
        </div>
    </div>
    <div class="category-home-card">
        <div class="category-home-pic category-home-pic-5"></div>
        <div class="category-home-link">
        </div>
    </div>
    </div>
</div>