Responsive Flexbox

Name: Responsive Flexbox
Brand: Jose Aguilar
SKU: joseaguilarblog-6562
Availability: InStock
Rating: 5 (4 reviews)

Hoy en día, debido al auge de los dispositivos móviles, todas las Webs se deberían programar pensando en estos. Existen diversas herramientas y frameworks para hacernos la vida más fácil como por ejemplo: bootstrap, skeleton, media queries, entre otros, pero en todos los casos te tienes que familiarizar con su forma de trabajar.

Existe una alternativa bastante interesante que nos puede ayudar mucho a la hora de desarrollar nuestra Web sin hacer mucho incapié en como consigue el efecto para que se vea correctamente en todos los dispositivos.

El Flexbox Layout (caja flexible) tiene como objetivo proporcionar una manera más eficiente de diseñar, alinear y distribuir el espacio entre los elementos de un contenedor, incluso cuando su tamaño es desconocido. De ahí el nombre del «flex», contenido dinámico.

El código para añadirlo a tu página Web es muy simple. Por ejemplo, en la demostración que tenemos en funcionamiento tan solo hemos añadido la estructura HTML dentro del <body>:

Source code

<div class="page">
    <header class="header">Flexbox Header</header>
    <article class="content">
        <p>Lorem Ipsum...</p>  
        <p><img src="images/1.jpg" /></p>
    </article>
    <aside class="aside sidebar_left">Flexbox Sidebar left</aside>
    <aside class="aside sidebar_right">Flexbox Sidebar right</aside>
    <footer class="footer">Flexbox Footer</footer>
</div>

Y en nuestra hoja de estilos .css tan solo tenemos:

Source code

.page {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center;
}
 
.page > * {
    padding: 10px;
    flex: 1 100%;
}
 
.header {
  background: tomato;
}
 
.footer {
  background: lightgreen;
}
 
.content {
  text-align: left;
  background: deepskyblue;
}
 
.sidebar_left {
  background: gold;
}
 
.sidebar_right {
  background: hotpink;
}
 
 
@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}
 
@media all and (min-width: 800px) {
  .content    { flex: 3 0px; }
  .sidebar_left { order: 1; } 
  .content    { order: 2; }
  .sidebar_right { order: 3; }
  .footer  { order: 4; }
}

Obteniendo un potente Layout.

La idea principal de este diseño «flex» es dar al contenedor la capacidad de alterar la anchura y altura de sus elementos, además de poder ordenar, llenar mejor el espacio disponible (sobre todo para dar cabida a todo tipo de dispositivos). Un contenedor «flex» expande sus elementos para llenar el espacio libre disponible o estos se contraen para que no se sobresalga.

Flexbox es funcional en la mayoría de navegadores modernos.

Debemos resaltar que Flexbox es muy apropiado para diseños a pequeña escala. Para diseños a mayor escala se recomienda utilizar el diseño de cuadrícula.

Ver información más extendida

Ver ejemplo en funcionamiento

Nos gustaría que nos dieras tu opinión. ¿Flexbox será el futuro de los layouts?