Entradas

Crear 2 columnas con FlexBox

Etiquetas: , ,

Crear 2 columnas con FlexBox

Layout de 2 columnas creado con FlexBox.
Flexbox es a largo tiempo el futuro del diseño web con css. El único problema que podemos experimentar es que a los proveedores de navegadores les tomó mucho tiempo la implementación de los códigos.
Si bien no hemos experimentado excesivamente las técnicas de FlexBox, se pueden realizar cosas de manera muy simple, que anteriormente eran bastante complicadas de hacer.

Una de las cosas que quisimos hacer es el centrado vertical, que con FlexBox es realmente muy fácil.
Te mostramos cómo crear un diseño de dos columnas responsivas, con igual ancho y margen.

HTML:
Requiere un parent con dos elementos.

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

El contenido de cada columna puede ser de cualquier algo, esto no importa aquí.

El CSS
El CSS también es increíblemente fácil 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;
}

Simple no? Ajustamos el display en el parent y luego ajustamos el div al 50% width. Lo genial es que podemos agregar padding, borde o margen a los elementos secundarios sin tener que preocuparse de una columna se extienda a la siguiente fila.




Por:


Entradas Relacionadas

Deja un comentario