Bloguero-ec

Codigo Fuente, programación, Diseño Web

Cabecera responsive utilizando flexbox una propiedad de css..

febrero 12, 2016
codigo-fuente,css,css3,diseño web


Etiquetas: , ,


Si realizar una cabecera responsive hasta el momento se te hace un poco complicado y sigues utilizando propiedades como float, margin  u otros trucos complicados e incluso ajustar manualmente los valores de píxeles, pues bien …… ¡Eso se acabó…!

Crearemos una cabecera responsive utilizando flexbox.

La técnica que se va a demostrar que se basa en el modo de diseño de gran alcance Flexbox que hace todo el trabajo sucio por ti. Utiliza sólo un puñado de propiedades CSS para crear una cabecera que esté correctamente alineada y se vea bien en todos los tamaños de pantalla, dejando el código más limpio.

La técnica

En este ejemplo demostrativo se ha construido una cabecera, que está separada en tres secciones con una cabecera con un contenido normal anidado dentro de ellos:

  • Sección izquierda – El logotipo de la empresa.
  • Sección media – Varios enlaces.
  • Sección derecha – Un botón.

cabecera responsive utilizando la propiedad flex

A continuación se puede extraer una versión simplificada del código.

Este es el código  HTML, donde agrupamos las secciones separadas con etiquetas div . Esto hace que sea más fácil para las reglas CSS que se aplicarán y, en general produce un código más organizada.

<header>
  <div class="header-left"><span>Bloguero</span>-ec</div>
    <div class="header-center">
        <ul>
            <li><a href="http://www.bloguero-ec.com/computadoras">Noticias Computadoras</a></li>
            <li><a href="http://tutoriales.bloguero-ec.com/post/category/curso-de-codeigniter/">Codeigniter</a></li>
            <li><a href="http://www.bloguero-ec.com/">Auspiciantes</a></li>
        </ul>
    </div>
  <div class="header-right"><button>Registrarse Gratis</button></div>
</header>

Este es el CSS, que sólo con un par de líneas logra hacer todo el trabajo y  lo que hace es encontrar los lugares adecuados para cada una de las secciones.

header{
    /* Activamos flex. */
    display: flex; 
    /* extendemos los elmentos dentro de la cabecera. */
    justify-content: space-between;
    /* Alineamos el contenido verticalmente dentro de la cabecera. */
    align-items: center;

    padding: 40px 100px;
    color: #fff;
    background-color: #ccebff;

}

Haciendo la cabecera responsive

El space-between siempre se hará cargo de la alineación, incluso cuando cambia el tamaño de la pantalla. Sin embargo, cuando la ventana se vuelve demasiado pequeña para una cabecera horizontal, podemos hacer que se haga vertical, cambiando la propiedad flex-direction en una consulta de media query.

cabecera responsive utilizando la propiedad flex

O con la ventana aún mas pequeña quedaría así..

cabecera responsive utilizando la propiedad flex

el codigo :

@media (max-width: 1000px){
    header{
        /* revertimos la cabecera haciendola vertical. */
        flex-direction: column;
        /* alinemamos el contenido al comienzo (a la izquierda) de la cabecera. */
        align-items: flex-start;
    }
}

En este breve y rápido tutorial , esperamos que lo haya encontrado útil y empiece a aplicar de forma inmediata. Flexbox . La compatibilidad con exploradores hoy por hoy es buena , esta técnica se puede aplicar sin causar ningún caos dentro de los navegadores.

Para obtener más información sobre Flexbox y sus propiedades CSS utilizadas, echa un vistazo a los siguientes enlaces:

  1. Una guía rápida para flexbox
  2. justify-content
  3. align-items
  4. flex-direction

Demostración

Mas Publicaciones

Siguenos




Conviertase en Editor

Te gustaría ser editor en Bloguero-ec.? Escribe tutoriales referente a programación, diseño web, CSS, entre otros y deja tu marca personal en nuestro sitio, contáctanos y empieza a editar Ya..

Compartir..!

© Copyright 2017 Bloguero-ec - Derechos Reservados

A %d blogueros les gusta esto: