CSS Flexbox - 多行/w flex-direction：列

Question

Please see the design brief attached I'm trying to figure out how to align the Green colored box so that it equally equates to 25% of the height when viewed via my @media only screen and (max-width: 600px) query in my CSS. Along with an issue with the yellow blocks not aligning to the same height as the green colored box.

I cannot seem to arrange the content blocks in height order as seen on the design brief -> mobile view (right-side).

[design brief]: https://i.stack.imgur.com/rw8ib.jpg

//HTML//

<div class="container">
<div class="red">
    <!-- <label>A</label> -->
</div>

<div class="yellow_green_wrapper">
    <div class="yellow"> <!-- <label>B</label> -->
        <div class='one'></div>
        <div class='two'></div>
        <div class='three'></div>
        <div class='four'></div>
    </div>
    
    <div class="green">
        <!-- <label>C</label> -->
    </div>
</div>


<div class="blue">
    <!-- <label>D</label> -->
</div>

    .container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    gap: 0.5rem;
    padding: 0.5rem;
}

@media only screen and (max-width: 600px) {
    .yellow_green_wrapper {
        flex-direction: column-reverse; 
    }

    .yellow.four {
        width: 100%;
    }
    .yellow  > div.two, .yellow  > div.three, .yellow  > div.four {
        width: 33%;
    }
}

.yellow_green_wrapper {
    display: flex;
    width: 100%;
    position: relative;
    flex-grow: 1;
}

.red , .blue, .green, .yellow {
    width: 100%;
    position: relative;
    flex-grow: 1;
}

.red label, .blue label, .green label, .yellow label{
    position: absolute;
    left: 50%;
    top: 50%;
}

.red {
    background-image: linear-gradient(rgba(122, 45, 45, 0.9),rgba(168, 77, 77, 0.9));
}

.blue {
    background-image: linear-gradient(rgba(31, 70, 177, 0.9),rgba(144, 172, 209, 0.9));
}

.green {
    background-image: linear-gradient(rgba(161, 241, 181, 0.9),rgba(101, 163, 114, 0.9));

}

.yellow {
    display: flex;
    flex-flow: row wrap;
}

.yellow, .green {
    height: 100%;
}

.yellow  > div {
    background-image: linear-gradient(rgba(248, 171, 6, 0.9),rgba(230, 181, 117, 0.9));
    flex-grow: 1;
    margin: 0.5rem;
}

.yellow  > div.one {
    width: 100%;
}

Answer 1

The layouts look suitable for using CSS grid. That way things are simplified as you don't need to individually define widths etc.

This snippet removed the grouping of yellow and green and uses the CSS grid-template-areas property to set up the various layouts.

 .container { display: grid; grid-template-areas: 'AA' 'BC' 'D D'; rgrid-template-columns: 1fr 1fr; rgrid-template-rows: 1fr 1fr 1fr; width: 100vw; height: 100vh; gap: 0.5rem; padding: 0.5rem; }.red label, .blue label, .green label, .yellow label { position: absolute; left: 50%; top: 50%; }.red { grid-area: A; background-image: linear-gradient(rgba(122, 45, 45, 0.9), rgba(168, 77, 77, 0.9)); }.yellow { grid-area: B; display: grid; gap: 0.5rem; grid-template-areas: 'WWW' 'XY Z'; }.yellow>* { background: yellow; }.one { grid-area: W; }.two { grid-area: X; }.three { grid-area: Y; }.four { grid-area: Z; }.blue { background-image: linear-gradient(rgba(31, 70, 177, 0.9), rgba(144, 172, 209, 0.9)); grid-area: C; }.green { background-image: linear-gradient(rgba(161, 241, 181, 0.9), rgba(101, 163, 114, 0.9)); grid-area: D; } @media (max-width: 600px) {.container { grid-template-areas: 'A' 'C' 'B' 'D'; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1.5fr 1fr; }.yellow { grid-template-areas: 'WW' 'XY' 'Z Z'; } }

 <div class="container"> <div class="red"> <!-- <label>A</label> --> </div> <div class="yellow"> <!-- <label>B</label> --> <div class='one'></div> <div class='two'></div> <div class='three'></div> <div class='four'></div> </div> <div class="green"> <!-- <label>C</label> --> </div> <div class="blue"> <!-- <label>D</label> --> </div>