flex

by id0

HTML

<section>
    <div class="a flex-grow-2">a test</div>
    <div class="b flex-shrink">b</div>
    <div class="c flex-grow-2">c</div>
    <div class="d flex-grow-2">d test test</div>
    <div class="e">e test test test</div>
    <div class="f">f</div>
    <div class="g flex-grow-2">g</div>
</section>

SCSS

section {
    display: flex;
    height: 500px;
    flex-direction: column;
    flex-wrap: wrap;
    // justify-content: space-around;
}

div {
    width: 120px;
    flex-basis: 100px;
    flex-grow: 1;
    font-size: 30px;
    padding: 40px;
    color: white;
    background: red;
    
    &:nth-of-type(even) {
        color: red;
        background: gray;
    }
}

.flex-grow-2 {
    flex-grow: 3;
}