¡Esta es una revisión vieja del documento!
En este tema vamos a explicar principalmente el layout en CSS con flexbox y grid.
Flex se utiliza para colocar cosas de forma horizontal o vertical.
Vamos a explicar flex con el siguiente ejemplo:
1 2 3 4 5 6 7 |
< div class = "container" > < div >Item1</ div > < div >Item2</ div > < div >Item3</ div > < div >Item4</ div > < div >Item5</ div > </ div > |
1 2 3 4 5 6 |
.container { display :flex; justify- content :flex-start; align- content :flex-start align-items:flex-start; } |
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.
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.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 mismaEs 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
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
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
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.
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.Mas información en:
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.
1 2 3 4 5 6 7 |
< div style = "display:flex" > < div >Item1</ div > < div >Item2</ div > < div >Item3</ div > < div style = "margin-left:auto" >Item4</ div > < div >Item5</ div > </ div > |
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:
Grid permite colocar cosas en dos dimensiones. Como si fuera una rejilla (un grid en inglés).
1 2 3 4 5 6 7 8 9 |
.container { display :grid; grid-template-columns: 1 fr 1 fr 2 fr; grid-template-rows: 1 fr 2 fr; } .item { border : 1px solid red ; } |
1 2 3 4 5 6 7 8 |
< div class = "container" > < div class = "item" >Item1</ div > < div class = "item" >Item2</ div > < div class = "item" >Item3</ div > < div class = "item" >Item4</ div > < div class = "item" >Item5</ div > < div class = "item" >Item6</ div > </ div > |
Indica el tamaño de cada columna
Las unidades pueden ser:
Ejemplos:
grid-template-columns: 1fr 1fr 2fr
La última columna tendrá el doble de tamaño que las anterioresgrid-template-columns: 1fr 1fr 50px
La segunda columna tendrá el doble de tamaño que la primera. La última siempre 50pxgrid-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.Si hay muchas columnas y todas del mismo tamaño en vez de
1 2 3 |
.container { grid-template-columns: 1 fr 1 fr 1 fr 1 fr 1 fr 1 fr; } |
1 |
grid-template-columns: repeat ( 6 , 1 fr); |
o en vez de
1 2 3 |
.container { grid-template-columns: 100px 100px 100px 100px 100px 100px ; } |
1 |
grid-template-columns: repeat ( 6 , 100px ); |
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:
1 2 3 |
.container { grid-template-columns: repeat (auto-fit, 100px ); } |
Por último se puede usar la función minmax
de CSS para hacerlo de la siguiente forma
1 2 3 |
.container { grid-template-columns: repeat ( auto-fit, minmax( 100px , 1 fr ) ); } |
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
Es lo mismo que grid-template-columns
pero referido a las filas.
Ejemplo de Layout con BEM por columnas.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.l-columns { display : grid; grid-template-columns: repeat ( 1 , 1 fr); } .l-columns- -2 { grid-template-columns: repeat ( 2 , 1 fr); } .l-columns- -3 { grid-template-columns: repeat ( 3 , 1 fr); } .l-columns- -4 { grid-template-columns: repeat ( 4 , 1 fr); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
< div class = "l-columns l-columns--3" > < div > < h2 >Column A</ h2 > </ div > < div > < h2 >Column B</ h2 > </ div > < div > < h2 >Column C</ h2 > </ div > < div > < h2 >Column D</ h2 > </ div > < div > < h2 >Column E</ h2 > </ div > < div > < h2 >Column F</ h2 > </ div > </ div > |
Para hacer una clase de Layout hay que seguir las siguientes reglas:
div
principal, al que llamaremos "padre"div
hijos que llamaremos "áreas" (Es para seguir la nomenclatura de grid)&__area
o &__area-YYYY
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.l-extremo { display :flex &__area-izquierda { margin-right : auto ; } &__area-derecha { margin-left : auto ; } } .l-columns { display : grid; grid-template-columns: repeat ( 1 , 1 fr); @for $i from 1 to 12 { &--#{$i} { grid-template-columns: repeat ($i, 1 fr); } } &__area { } } |
1 2 3 4 5 6 7 8 |
< div class = "l-extremo" > < div class = "l-extremo__area-izquierda" > < div class = "c-button" >Pulsar Izquierda</ div > </ div > < div class = "l-extremo__area-derecha" > < div class = "c-button" >Pulsar Derecha</ div > </ div > </ div > |
1 2 3 4 |
< div class = "l-extremo" > < div class = "l-extremo__area-izquierda c-button" >Pulsar Izquierda</ div > < div class = "l-extremo__area-derecha c-button" >Pulsar Derecha</ div > </ div > |
Artículos en general sobre Layout
Modifica la página del tema anterior para usar ahora lo nuevo de grid y flex cuando sea necesario.