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)

Question

Esta pregunta ya tiene una respuesta aquí:

• Columna izquierda y columna derecha apilada usando flexbox CSS [duplicado] 2 respuestas

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.

Answer 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>