5. CSS Avanzado

En este tema vamos a explicar principalmente el layout en CSS con flexbox y grid.

Flexbox

Flex se utiliza para colocar cosas de forma horizontal o vertical.

A Complete Guide to Flexbox

Flexbox Layout Cheatsheet. Otra gía rápida de flexbox

The Complete CSS Flex Box Tutorial

Flexbox — The Animated Tutorial

In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?

Vamos a explicar flex con el siguiente ejemplo:

Como vemos hay dos tipos de elementos, el contenedor y los items que hay centro. El contenedor siempre tendrá la siguiente línea display:flex;.

Ahora veremos algunas de las opciones que permite flex.

flex-direction

Para hacer que los item se muestren de forma vertical u horizontal. Sus valores son

flex-direction:row Los items se colocan en horizontal. Es decir en una única línea.

flex-direction:column Los items que solocal en vertical. Es decir en una única línea.

flex-wrap

Para hacer que si no caben en una línea, se pasen a la línea siguiente.

flex-wrap:wrap Si se añade se pasa de línea en vez de mantenerse en la misma

justify-content

Es como se distribuye el espacio sobrante en horizontal. Hacía la izquierda, derecha, ocupando todo el espacio, etc, etc.

Alguno de sus posibles valores son:

justify-content:flex-start

justify-content:flex-end

justify-content:center

justify-content:space-between

justify-content:space-around

justify-content:space-evenly

align-content

Es como se distribuye el espacio sobrante en vertical. Hacía arriba, abajo, ocupando todo el espacio, etc, etc.

Alguno de sus posibles valores son:

align-content:flex-start

align-content:flex-end

align-content:center

align-content:strech

align-content:space-between

align-content:space-around

align-items

Si los elementos se justifican hacía arriba, abajo, ocupando todo el espacio, etc, etc.

Alguno de sus posibles valores son:

align-items:flex-start

align-items:flex-end

align-items:center

align-items:stretch

align-items:baseline

flex-grow

Permite que crezca el item si hay mas espacio.

flex-grow:2 Este item crecería el doble si se hace mas grande el contenedor.

Se usa entro de los "hijos"

flex

Es poner en una misma linea flex-grow, flex-shrink y flex-basis

flex: 1 1 auto Si se indica en todos los hijos, hace que todos los hijos ocupen todo el espacio y todos ellos tengan el mismo ancho.

Se usa entro de los "hijos"

Mas información en:

Understanding flex-grow, flex-shrink, and flex-basis

Diferencia entre flex basis y width

Guia definitiva de Flexbox (2): Flex basis, flex-frow, flex-shrink

Las propiedades flex-grow, flex-shrink y flex-basis

margin y auto

Una utilidad de flexbox es hacer menús pero a veces queremos mover algunos item hacia la derecha.El truco para hacerlo es usar margin-left: auto; En los siguientes páginas se indica como hacerlos.

En el ejemplo, los items 1 , 2 y 3 estarán pegados a la izquierda y los items 4 y 5 estarán pegados a la derecha.

Mas información en:

The Most Popular Navigation Bars created with Flexbox

Understanding Flexbox - auto-margin

Grid

Grid permite colocar cosas en dos dimensiones. Como si fuera una rejilla (un grid en inglés).

Guías completas de Grid:

Getting Started with CSS Grid

A Complete Guide to Grid

CSS Grid is a two-dimensional layout system created specifically to tackle grid-based user interfaces on the web.

The Ultimate CSS Grid Tutorial for Beginners (With Interactive Examples)

css_grid_layout_cheatsheet.pdf

Grid vs FlexBox:

Video:Flexbox vs. CSS Grid — Which is Better?

Does CSS Grid Replace Flexbox?

Mas información:

[https://css-tricks.com/almanac/properties/j/justify-items/|justify-items]]

Los 9 grandes errores con CSS Grid

Things I’ve Learned About CSS Grid Layout

Notes on using CSS Grid in production: Tiene de interesante el uso de "@movil" y el uso de bucles en SASS

Grid by Example

grid-template-columns

Indica el tamaño de cada columna

Las unidades pueden ser:

Tamaño fijo: Usar px

auto: Coje el menos tamaño posible

fr: Es una fracción del espacio libre después de quitar las columnas de tamaño fijo (Las 2 formas anteriores, px y auto)

Ejemplos:

grid-template-columns: 1fr 1fr 2fr La última columna tendrá el doble de tamaño que las anteriores

grid-template-columns: 1fr 1fr 50px La segunda columna tendrá el doble de tamaño que la primera. La última siempre 50px

grid-template-columns: 1fr 2fr 80px auto La última tendrá un tamaño mínimo posible, la tercera tendrá 80px, la segunda el doble que la primera.

repeat

Si hay muchas columnas y todas del mismo tamaño en vez de se puede escribir:

o en vez de

se puede escribir:

auto-fit

Si el tamaño de las columnas es fijo se puede hacer lo siguiente para no especificar el número de columnas y que sea variable según el ancho de la ventana:

En ese caso ocupará todas las filas que sea necesario para poder poner ponerlo todo. Es una forma de hacer las cosas responsivas.

Por último se puede usar la función minmax de CSS para hacerlo de la siguiente forma

Que hará que cada columna ocupe como mínimo 100px y si hay mas espacio crecerá hasta ocupar todo. Pero se crearán tantas filas como sea necesario. Mas información en repeat,auto-fit,minmax,1fr y en MinMax in CSS Grid — 3/3 Flexibility

grid-template-rows

Es lo mismo que grid-template-columns pero referido a las filas.

gap

Indica la separación entre cada una de las celdas del grid.

Bloque de Layout por columnas

Ejemplo de Layout con BEM por columnas.

Reglas BEM de Layout

Para hacer una clase de Layout hay que seguir las siguientes reglas:

Siempre con dos elementos.

El div principal, al que llamaremos "padre"

Los div hijos que llamaremos "áreas" (Es para seguir la nomenclatura de grid)

El CSS solo debe tener cosas para modificar la posición (y a veces tamaño) de las Áreas pero no cambiar ni sus colores, fuentes, etc.

Puede ser optativo poner en las areas la clase del elemento si no tiene utilidad.

Las clases CSS de los elementos que son area se llamará &__area o &__area-YYYY.

En un área se podría poner un componente ya que sus propiedades CSS no van a chocar.

Artículos en general sobre Layout

1-Line Layouts.10 Modern CSS layout and sizing techniques

Modern CSS Solutions

Ejercicios

Ejercicio 1

Modifica la página del tema anterior para usar ahora lo nuevo de grid y flex cuando sea necesario.