Flexbox: cuando se ajusta en una fila, ¿cómo puedo astackr dos elementos + sin marcas adicionales?

ACTUALIZACIÓN: Así que pude hacer que esto funcionara con Flexbox Codepen Sin embargo, como señalan algunos miembros de la comunidad, las advertencias (como las alturas fijas) demuestran que la cuadrícula CSS es el mejor caso para el diseño.

Estoy tratando de confiar en el ajuste de fila de Flexbox para la mayor cantidad de diseño posible. Sigo corriendo en el escenario donde quiero astackr dos o más elementos uno encima del otro (similar a flotar) pero no quiero agregar un marcado que anularía el propósito aquí.

No puedo encontrar ningún ejemplo de esto en alguna parte, ¿tal vez es imposible?

He creado un CodePen para mostrar cómo estoy intentando astackr dos elementos y luego en otra fila, astackr 3 elementos.

body { display: flex; flex-wrap: wrap; } .full-width { flex: 100%; } .fifty { flex: 0 0 50%; } .one-third { flex: 0 0 33%; } .twnty-five { flex: 0 0 25%; } div.one-third:nth-child(6), div.one-third:nth-child(7) { // margin: auto; flex: 0 0 33%; max-height: 50px; height: 45px; min-height: 45px; } div.twnty-five:nth-child(11), div.twnty-five:nth-child(12), div.twnty-five:nth-child(13) { // margin-left:auto; flex: 0 0 25%; height: 25px; min-height: 25px; } div { display: flex; min-height: 100px; align-items: center; justify-content: center; text-align: center; border: 1px solid #DFDFDF; box-sizing: border-box; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 
 
full-width
fifty
fifty
twnty-five
twnty-five
twnty-five
stack top
stack middle
stack bottom

Como han dicho otros, el Grid Layout CSS probablemente sería más fácil y más limpio para sus propósitos. Flexbox está diseñado para que sus elementos fluyan en una dirección, y no actúa como una tabla o cuadrícula.

Pero confiando en Flexbox , he recreado lo mejor que se me ocurre usar. Excepto que implica un marcado adicional (realmente no puede lograr todos sus objectives: limitaciones de Flexbox ).

Establece una clase extra .flexcol en un elemento div, que actuará como un contenedor para los elementos que desea astackr.

 .flexcol { flex-direction: column; align-items: stretch; } body { display: flex; flex-wrap: wrap; } .full-width { flex: 100%; } .fifty { flex: 0 0 50%; } .one-third { flex: 0 0 33%; } .twnty-five { flex: 0 0 25%; } div { display: flex; min-height: 100px; align-items: center; justify-content: center; text-align: center; border: 1px solid #DFDFDF; box-sizing: border-box; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 
 
full-width
fifty
fifty
twnty-five
twnty-five
twnty-five
stack top
stack middle
stack bottom