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 one-third one-third one-third stack top one-third stack bottom 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 one-third one-third one-third stack top one-third stack bottom twnty-five twnty-five twnty-five stack top stack middle stack bottom