Hello! Can you please tell how using Flexbox to make the blue block appear under red?

The width of the yellow and blue - 50%, 2 red by 25% enter image description here

    1 answer 1

    For example, using flexbox inside another flexbox

    Flexbox mate

    html, body { margin: 0; padding: 0; } .container { height: 100vh; display: flex; background-color: #ccf; } .col1 { background-color: yellow; width: 50%; } .col2 { width: 50%; display: flex; flex-direction: column; } .col2-top { height: 50%; display: flex; } .col2-top-left { width: 50%; background-color: red; } .col2-top-right { width: 50%; background-color: red; } .col2-bottom { background-color: blue; height: 50%; } 
     <div class="container"> <div class="col1">col1</div> <div class="col2"> <div class="col2-top"> <div class="col2-top-left">col2-top-left</div> <div class="col2-top-right">col2-top-right</div> </div> <div class="col2-bottom">col2-bottom</div> </div> </div>

    • Thank you very much! I will try. - user233877