Creando una web básica con Flex en HTML

- Andrés Cruz

Creando una web básica con Flex en HTML

En esta entrada veremos cómo crear la clásica estructura de una página web empleando los FlexBox; anteriormente vimos como FlexBox; ahora definiremos una estructura de una página web base como la siguiente:

Anteriormente se explicó el uso de las propiedades:

Para definir el tamaño básico, espacio sobrante y espacio faltante de los flex y su contenedor respectivamente; estas propiedades las emplearemos en este ejemplo para crear la estructura de una web básica; si tienes dudas, puede consultar los enlaces anteriores.

 #main {
    display: -webkit-flex;
    display:  flex;
    -webkit-flex-flow: row;
    flex-flow: row;
}

#main > article {
    flex: 3 1 60%;
    order: 2;
}

#main > nav {
    flex: 1 6 20%;
    order: 1;
}

#main > aside {
    flex: 1 6 20%;
    order: 3;
}

header, footer {
    display: block;
}

Como puedes apreciar, la idea fundamental es definir el contenedor padre de los flexs con display: flex e indicando la dirección flex-flow: row (inclusive podemos indicar el orden).

Además del comportamiento, orden en que deben aparecer en una misma fila y dimensiones de los flex, empezando con el contenedor principal (article) y los respectivos menús laterales aside y nav.

Enlaces de interés

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

!Cursos a!

10$

En Udemy

Quedan 0 días!

Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!
!Web Alojada en Hostinger!