Crear un diseño a dos columnas con Flexbox

Flexbox se supone que es la gallina de los huevos de oro de las técnicas de diseño CSS insuficientes. Y la única decepción que he sufrido con FlexBox es que los principales navegadores se tomaron mucho tiempo para implementarlo. No puedo decir que haya experimentado mucho con los límites de FlexBox, pero la técnica adquirida me ha permitido llevar a cabo una serie de tareas que fueron excesivamente complicadas en el pasado. Una de las tareas que he dominado fácilmente es el centrado vertical con FlexBox.

Mi siguiente tarea que os voy a exponer es la creación de un diseño a dos columnas responsive, con columnas de igual anchura y un margen de píxel fijo entre ellos, así como una cantidad de padding variable que vosotros podéis establecer. Ha sido una práctica terriblemente fácil... ¡y es por eso por lo que me encanta FlexBox!

EL HTML

El diseño requiere de un padre y de dos elementos hijos

<div class="flexbox-container">
	<div><h3>Column 1h3>div>
	<div><h3>Column 2h3>div>
div>

El contenido de cada columna puede tener cualquier height, eso no es lo importante aquí.

EL CSS

El CSS es también increiblemente sencillo y breve:

.flexbox-container {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
}

.flexbox-container > div {
	width: 50%;
	padding: 10px;
}

.flexbox-container > div:first-child {
	margin-right: 20px;
}

Simplemente es necesario ajustar el display para FlexBox en el elemento padre y luego dar a cada hijo la anchura al 50%. Flexbox también te otorga la capacidad de poder agregar un padding, borde y margen a los elementos hijos sin necesidad de preocuparse por una columna que se extienda a la siguiente fila.

Debo reconocer que estaba muy emocionado cuando me enteré que CSS calc porque quería solapar lo que FlexBox hace hoy en día, pero ahora que FlexBox cuenta con soporte en casi todos los navegadores modernos, no necesito CSS calc para mis diseños. ¡Esto sin duda es una noticia excelente! Estoy tan contento de que FlexBox este entre nosotros. Acabas de comprobar que tareas complejas con CSS a pelo, son totalmente pan comido con Flexbox.

Y este ha sido el tutorial sobre crear un diseño a dos columnas con Flexbox, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP