El blog para emprendedores

Crea contenido flexible y adaptable con flexbox

Publicado por Alejandra el 27 - Oct - 2015

Cajas, altos, anchos, flotar, displays… ¡Se acabó tanto lio! Con flexbox puedes crear contenido flexible y adaptable, perfecto para trabajar en Responsive Web Design; así que si aún no has dado el salto ¡Este es tu momento!

La propiedad flexbox nos permite crear sitios completamente adaptables, gracias a layouts flexibles sin tener que recurrir constantemente a los floats. El Flexbox puede ajustarse al espacio con el que dispone, alterando el ancho y el alto de los elementos de manera correcta.

Sí aún no has trabajado con Flexbox, te pondremos un ejemplo muy sencillo para que des tus primeros pinitos y entiendas un poco de qué va todo esto del display:flex. Vamos a crear la típica galería de productos con cajas de información básica de cada producto: Foto y un pequeño resumen.

Para este ejemplo, antes teníamos que matarnos con displays, floats y alturas mínimas para que las cajas se pusieran en su sitio y se adaptaran de alguna manera. Ahora es tan fácil como usar Flexbox.

Crea un archivo HTML donde tengas una lista ul con tu galería, donde cada caja es un li. Cuando ya tengas todo el HTML montado, en lugar de romperte la cabeza con floats dale estas propiedades a tu clase madre <ul>:

.galeria{display: webkit-flex; display: flex; -webkit-flex-wrap:wrap; flex-wrap:wrap;}

Y estas propiedades a cada uno de sus hijos <li>:

.galeria li{display: -webkit-flex;display:flex;}

¡Y ya está!

El resultado debería ser algo así:

Básicamente, lo que hemos hecho, es declarar que el contenedor “galeria” es flexible; en otras palabras display:flex para que los elementos siempre se adapten al espacio disponible; Luego le dijimos que al contenedor que debía contar con múltiples líneas: wrap. Y para terminar le dijimos a sus hijos que también eran flexibles. ¡Así de fácil!

Pero esto solo fue un ejemplo de abrebocas, hay otras propiedades que podemos jugar para crear contenidos realmente fascinantes:

display: flex, inline-flex

flex-direction: row, row-reverse, column-reverse

flex-wrap: no-wrap, wrap, wrap-reverse

El el w3schools encontrarás las definiciones de cada una de ellas y la manera de usarlas:

Para empezar a crear páginas flexibles y dinámicas.

Para terminar, debes saber que flexbox también esta disponible en bootstrap por lo que si estabas confundido con no saber que usar, puedes seguir beneficiándote con bootstrap y crear páginas completamente flexibles.

Y si te estancas, aquí puedes ver cómo lo hicimos:

Los estilos:

*{margin:0;padding:0}body{font-family:’Open Sans’,’sans-serif’;font-size:12px;font-weight:300}.title{text-align:center;padding:20px}.galeria{width:980px;margin:0
auto;overflow:hidden;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap}.galeria
li{position:relative;width:50%;float:left;padding:0.625rem;display:-webkit-flex;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width 0.3s ease-out;transition:width 0.3s ease-out}.galeria li
.caja{position:relative;padding:6px
6px 20px 6px;overflow:hidden}.imagen{display:block;width:100%;margin-bottom:10px}.galeria li
img{width:100%;height:auto}.galeria li
h3{margin-bottom:6px;font-size:17px;font-weight:bold;line-height:normal}.galeria
p{color:#888}.galeria li
time{position:absolute;bottom:0;left:0;width:100%;padding:6px;font-weight:400;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}.caja{border:1px
solid #ccc}@media screen and (max-width:992px){.galeria{width:auto}}@media screen and (max-width:768px){.galeria
li{width:50%}}@media screen and (max-width:468px){.galeria
li{width:100%}}

El HTML:

<div class=»title»>
<h2 class=»title»>Esto es un ejemplo de Flexbox</h2>
<p>Es muy fácil trabajar con cajas flexibles.</p>
</div>
<ul class=»galeria»>
<li>
<div class=»caja»>
<div class=»imagen»>
<img src=»img1.png»>
</div>
<h3>Este sería el título 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>
<li>
<div class=»caja»>
<div class=»imagen»>
<img src=»img2.png»>
</div>
<h3>Aquí el ejemplo del segundo elemento</h3>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<div class=»caja»>
<div class=»imagen»>
<img src=»img3.png»>
</div>
<h3>Y el tercero</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </p>
</div>
</li>

<li>
<div class=»caja»>
<div class=»imagen»>
<img src=»img4.png»>
</div>
<h3>Titulo del cuarto</h3>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</li>

<li>
<div class=»caja»>
<div class=»imagen»>
<img src=»img5.png»>
</div>
<h3>del quinto</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>

<li>
<div class=»caja»>
<div class=»imagen»>
<img src=»img6.png»>
</div>
<h3>Y para terminar el último título</h3>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
</div>
</li>
</ul>

 

Deja tu comentario