Comment flotter/divs flex verticalement puis continuer horizontalement

Question

J'ai une mise en page qui obtient personnalisé par de nombreux clients différents de sorte que la structure HTML est verrouillé à

<div class="container"> 
    <div>content</div> 
    <div>content</div> 
    <div>content</div> 
    <div>content</div> 
</div> 

REMARQUE: ne pas utiliser d'amorçage, conteneur est juste le nom applicable

Dans l'interface utilisateur que je dois être en mesure d'utiliser les CSS pour faire beaucoup de différentes dispositions de cette structure sans l'altérer. Il y en a un en particulier que je ne peux pas comprendre. La disposition souhaitée est la suivante:

Je sais que si tout cela était verticale, il serait facilement en mesure doo-avec de simples width et float styles. Je sais aussi que lancer une div contenant autour des deux premiers enfants serait une solution facile, mais encore une fois les exigences sont de laisser le html inchangé.

J'ai essayé:

.container { 
    display: flex; 
    flex-wrap: wrap; 
} 

.container > div { 
    width: 33.33335; 
    height: 400px; 
} 

.container > div:nth-child(1), 
.container > div:nth-child(2) { 
    height: 200px; 
} 

hauteurs appropriées pour mettre les divs enfants où les deux premiers sont la moitié de la hauteur des autres.

De même, je l'ai essayé:

.container > div { 
    float: left; 
} 

.container > div { 
    height: 400px; 
    width: 33.33333%; 
} 

.container > div:nth-child(1), 
.container > div:nth-child(2) { 
    height: 200px; 
} 

et de donner à nouveau les deux premiers enfants une hauteur qui est la moitié des autres. Rien n'a fonctionné, dans tous les résultats soit les deux premières piles et les autres ne flottent pas/flex ou les deux premiers ne s'empilent pas du tout.

Quelqu'un peut-il comprendre une méthode CSS de styling cette structure pour l'interface utilisateur désirée?

Appréciez l'aide.

Answer 1

Si vous pouvez définir une hauteur fixe sur le récipient, vous pouvez utiliser FlexBox avec flex-flow: column wrap. La hauteur fixe est nécessaire pour distinguer les éléments flexibles de l'emballage. Voici un exemple:

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; /* vertical alignment */ 
 
    align-content: center;   /* horizontal alignment */ 
 
    height: 320px;     /* essential for this method to work */ 
 
    background-color: lightyellow; 
 
    border: 1px dashed red; 
 
} 
 

 
.container>div { 
 
    flex: 0 0 90%;     /* flex-grow, flex-shrink, flex-basis */ 
 
    width: 30%; 
 
    margin: 5px; 
 
    background-color: lightgreen; 
 
} 
 

 
.container>div:nth-child(1), 
 
.container>div:nth-child(2) { 
 
    flex-basis: 40%;    /* override flex-basis from rule above */ 
 
}

<div class="container"> 
 
    <div>content</div> 
 
    <div>content</div> 
 
    <div>content</div> 
 
    <div>content</div> 
 
</div>