Columnas de igual altura Flexbox -

Se suponía que Flexbox era la olla de oro en el largo, largo arcoíris de técnicas de diseño CSS insuficientes. Y la única decepción que he experimentado con flexbox es que los proveedores de navegadores tardaron tanto en implementarlo. Tampoco puedo afirmar haber superado los límites de Flexbox, pero la técnica me ha permitido realizar algunas tareas que eran demasiado complicadas en el pasado. Una tarea fue dominar fácilmenteel centrado vertical con flexbox.

Mi siguiente tarea fue crear un diseño responsivo de dos columnas con columnas de igual ancho, igual altura y un margen de píxeles fijos entre ellas, así como cualquier cantidad de relleno. Fue tremendamente fácil… ¡y por eso me encanta Flexbox!

HTML

El marcado requiere un elemento principal y dos elementos secundarios:

divdivh3Columna 1/h3/divdivh3Columna 2/h3/div/div

El contenido de cada columna puede tener cualquier altura; Eso no es importante aquí.

El CSS

El CSS también es increíblemente fácil y breve:

.flexbox-container {pantalla: -ms-flex;pantalla: -webkit-flex;pantalla: flex;}.flexbox-container div {ancho: 50%;relleno: 10px;}.flexbox-container div:first-child { margen derecho: 20px;}

Simplemente configure la pantalla en flexbox en el padre y luego dele a cada hijo un 50% de ancho. Lo bueno de Flexbox es que puede agregar relleno, borde y margen a los elementos secundarios sin necesidad de preocuparse de que una columna se extienda a la siguiente fila.

Me emocioné mucho cuando aprendí sobre CSS Calc porque quería mejorar lo que hace Flexbox hoy, pero ahora que Flexbox es compatible con casi todos los navegadores modernos, no necesito CSS Calc para los diseños. ¡Excelente! Estoy muy contento de que flexbox esté aquí: ¡las tareas que deben ser ahora son fáciles!