Flexbox: Layout con rowspan

Question

mio HTML è simile al seguente esempio

<div id="wrapper"> 
<div id="a">a</div> 
<div id="b">b</div> 
<div id="c">c</div> 
<div id="d">d</div> 
</div> 

Sul tavolo vorrei div per visualizzare uno accanto all'altro che naturalmente è banale.

Sul dispositivo mobile Vorrei avere la layout tipo tabella con analogo di seguito

b, ced avere altezza flessibile così una avrebbe dovuto adattarsi a questo.

È possibile fare a meno dell'involucro b, ced in un div separato?

Answer 1

Sì, si può fare questo interamente con flexbox ... naturalmente si sta andando ad avere bisogno per decidere su una larghezza per il primo div a dimensioni di viewport più piccole, ma presumo che sia già pronto per la query multimediale richiesta.

#wrapper { 
 
    height: 100vh; 
 
    width: 90vw; 
 
    border: 1px solid grey; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    margin: 10px auto; 
 
} 
 
#wrapper div { 
 
    flex: 1 0 auto; 
 
    border: 1px solid white; 
 
    background: lightblue; 
 
    text-align: center; 
 
} 
 
#a { 
 
    flex-grow: 1; 
 
    height: 100%; 
 
    flex-basis: 50%; 
 
} 
 
@media screen and (min-width: 640px) { 
 
    #a { 
 
    height: auto; 
 
    flex-grow: none; 
 
    flex-basis: auto; 
 
    } 
 
}

<div id="wrapper"> 
 
    <div id="a">a</div> 
 
    <div id="b">b</div> 
 
    <div id="c">c</div> 
 
    <div id="d">d</div> 
 
</div>

Codepen Demo

Answer 2

Utilizzare solo FlexBox quando è necessario: in versione desktop:

* { box-sizing: border-box; } 
 
body { margin: 0; } 
 
#a { background: tomato; } 
 
#b { background: forestgreen; } 
 
#c { background: dodgerblue; } 
 
#d { background: orange; } 
 

 
#wrapper { 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
#wrapper > div { 
 
    float: left; 
 
    width: 50%; 
 
    margin-left: 50%; 
 
    padding: 5px; 
 
} 
 
#wrapper > #a { 
 
    position: absolute; 
 
    height: 100%; 
 
    margin-left: 0; 
 
} 
 
@media all and (min-width: 768px) { 
 
    #wrapper { 
 
     display: flex; 
 
    } 
 
    #wrapper > div { 
 
     margin-left: 0; 
 
    } 
 
    #wrapper > #a { 
 
     position: relative; 
 
     height: auto; 
 
}

<div id="wrapper"> 
 
    <div id="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl.</div> 
 
    <div id="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.</div> 
 
    <div id="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius.</div> 
 
    <div id="d">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.</div> 
 
</div>