tutorial start propiedad end column html css layout flexbox

html - start - flexbox grid tutorial



Patrón de diseño de Flexbox: 3 cuadrados ordenados(1 grande a la izquierda, 2 pequeños a la derecha apilados) (1)

Con flexbox, necesitaría una altura conocida (o calculable) para lograr esto sin cambiar el HTML .

* { margin: 0; padding: 0; } .box-wrapper { display: flex; flex-direction: column; flex-wrap: wrap; height: 200px; list-style-type: none; } .boxa { background: red; flex: 0 0 100%; width: 50%; } .boxb { background: orange; order: 2 } .boxc { background: lightgreen; } .boxb, .boxc { flex: 0 0 50%; width: 50%; }

<ul class="box-wrapper"> <li class="box boxa">BOX A</li> <li class="box boxb">BOX B</li> <li class="box boxc">BOX C</li> </ul>

Esta pregunta ya tiene una respuesta aquí:

Estoy tratando de lograr el siguiente diseño ordenado con flexbox:

HTML:

<ul class="box-wrapper"> <li class="box boxa">BOX A</li> <li class="box boxb">BOX B</li> <li class="box boxc">BOX C</li> </ul>

CSS:

.box-wrapper{ display:flex; } .boxa{ order: 1; // should be: width: 50%; // should be: height: 100%; } .boxb{ order: 3; // should be: width: 50%; // should be: height: 100%; } .boxc{ order: 2; // should be: width: 50%; // should be: height: 100%; }

La caja flotante-b y la caja-c no parecen funcionar, así que espero que alguien pueda ayudarme en esta. Cambiar el diseño HTML no es una opción en este caso.