Diseño flexible con Flexbox

Maquetación FLEX con CSS

En el siguiente artículo, vamos a describir, cómo usar flexbox para realizar nuestros diseños con CSS.

En el layout flex, los hijos de un contenedor definido cómo FLEX, sé comportarán de manera flexible. Estos, podrán entre otras cosas, ajustar al ancho del contenedor para ocupar todo el espacio, ajustarse para quedarse centrado, variar su ancho e incluso, ordenarse de manera inversa al definido.

Esto nos permitirá realizar maquetaciones flexibles, y será una gran ayuda para realizar nuestras versiones responsive, ya que todo el contenido se reajustará acorde al espacio que haya.

¿Podemos usar Flex con todos los navegadores?

Sí, podéis visitar este enlace, Can I use, donde veréis que navegadores soportan ahora mismo flexbox. Cómo podréis ver, a fecha de hoy, todos los navegadores con soporte, tienen un verde, por lo tanto se puede usar sin problemas.

¿Cómo empezamos con FLEXBOX?

Propiedades que afectan al contenedor (parent)

Bien, cómo todo, vamos a empezar con ejemplos:

En primer lugar, imaginemos que queremos tener 6 bloques de contenido, uno al lado de otro:

flex-direction

Por defecto, tenemos los elementos todos alineados a la izquierda, y en la parte superior. Vamos a empezar a hacer uso de flex. Imaginemos que ahora, queremos que en lugar de estar en la misma línea, estos elementos formen una sóla columna. Para ello haremos uso de flex-direction, que se aplica al contenedor.

Más opciones para flex-direction:

  • flex-direction: row para mostrarlos en una misma fila en orden normal. (opción por defecto)
  • flex-direction: column para mostrarlos en una misma columna en orden normal.
  • flex-direction: row-reverse para mostrarlos en una misma fila en orden inverso.
  • flex-direction: column-reverse para mostrarlos en una misma columna en orden inverso.

flex-wrap

Ahora vamos a intentar ahora, hacer que el contenido siempre se mantenga en la misma línea, tanto si es columna cómo si es fila, es decir, que aunque no quepan los elementos dentro del contendor que las contiene, que estás se ajusten al espacio que hay. Hay que tener en cuenta que es el comportamiento por defecto, aunque en este caso lo vamos a indicar.

¿Y si tiene más espacio el contenedor? Veamoslo:

Vaya, se queda igual. Ni se han movido… ¿no habíamos dicho antes, que el contenido se «ajustaba»?

Hagamos una pequeña presentación de justify-content: space-around (más adelante entraremos con más detalle)

Ahora, si queremos que las cajas tengan un tamaño mínimo, ¿cómo podemos forzar a que cuando no quepan, bajen de línea y el contenido se ajuste?

Más opciones para flex-wrap:

  • flex-wrap: wrap para mostrarlos en una misma fila en orden normal.
  • flex-wrap: nowrap para mostrarlos en una misma columna en orden normal. (por defecto )
  • flex-wrap: wrap-reverse la línea se rompe por arriba

Bien, hasta ahora, ya hemos visto cómo podemos poner el contenido en filas, columnas, darle la vuelta, y luego podemos hacer que siempre esté en una misma línea o en varias.

Ahora vamos a poner ese contenido, en relación al contenedor, donde queramos.

justify-content

Vamos ahora, a centrar nuestro contenido, sin tener en cuenta lo que haya a los lados

¿Y si queremos ponerlo a la izquierda?

usemos justify-content: flex-start

Vale, de acuerdo, flex-start, ¿eso es correcto, por qué no se usa «left»?. Bien, esto es por el siguiente motivo. Cuando el contenido está con columna (visto hace unas líneas), flex-start es sinónimo de «lo más arriba posible» y ya no es igual que left. Lo mismo pasa con row-reverse, y column-reverse. En cada contexto significa una cosa diferente.

justify-content con direction: column

justify-content con direction: row-reverse

justify-content con direction: column-reverse

En cada contexto, flex-start significa algo diferente

justify-content: flex-start | flex-end | center | space-between | space-around;

Más opciones para justify-content:

  • justify-content: flex-start para poner el contenido al principio.
  • justify-content: flex-end para poner el contenido al final
  • justify-content: center para centrar
  • justify-content: space-between deja el mayor espacio posible entre los elementos
  • justify-content: space-around deja el mayor espacio posible entre elementos además de añadirlo a los lados

align-items

Una vez hemos visto el concepto de justify-content, align-items es lo mismo pero en la otra dirección. Es decir, cuando usamos una dirección row, con los elementos en la misma fila, justify-content, nos ajusta el contenido de forma horizontal. align-items, lo hace de forma vertical.

Sí, con una sola línea, hemos conseguido que el contenido, se centrara verticalmente.

Y con ayuda del justify-content… podemos centrar todo el contenido, tanto horizontal cómo verticalmente

Pero esto no es todo!! Hay varias opciones, que pueden ser más que interesantes, ¿quieres columnas con mismo alto?

 

Otra propiedad es, baseline, con el que se consigue que estén todos los textos a la misma altura, si usamos de referencia la base de la línea.

Más opciones para align-items:

  • align-items: flex-start para poner el contenido al principio.
  • align-items: flex-end para poner el contenido al final
  • align-items: center para centrar
  • align-items: stretch deja el mayor espacio posible entre los elementos
  • align-items: baseline deja el mayor espacio posible entre elementos además de añadirlo a los lados

align-content

Esta propiedad nos sirve para definir cómo queremos el contenido cuando hay más de una línea. Es parecido a justify-content, pero con más líneas. Es más, si sólo hay una línea, esta propiedad no afecta.

Más opciones para align-content:

  • align-content: flex-start los elementos, se ajustan a la arriba
  • align-content: flex-end los elementos se ajustan abajo
  • align-content: center para centrar, dejando espacio arriba y abajo
  • align-content: space-between distribuye el espacio entre los elementos, sin contar los bordes del contenedor
  • align-content: space-around distribuye el espacio entre los elementos
  • align-content: stretch aprovecha el espacio entre líneas

Propiedades que afectan a los hijos (children)

order

Order, nos permite ordenar los items de la manera que nosotros queramos. Por defecto, el contenido se muestra, conforme está puesto en el código de la web, pero con flexbox podemos cambiarlo, y por ejemplo destacar un elemento siempre en primer lugar. (admite también número negativos)

se usa de la siguiente manera: order: número

flex-grow

Supongamos que no queremos poner un tamañó de ancho fijo, pero sí que queremos que uno de los elementos ocupe el triple que el resto. Con flex-grow, podemos definir esta relación

Hay que definirles a todos los elementos un valor

se usa así: flex-grow: número

flex-shrink

Ahora, en lugar de hacerlos más grande, queremos hacerlos más pequeños

se usa así: flex-shrink: número

flex-basis

Con esta propiedad, podemos definir un tamaño por defecto, antes de que el espacio se reparta entre los elementos. Se puede usar porcentaje, px o cualquier otra unidad.

Destacar, si el valor que se pone a flex-basis es 0, el espacio que haya interno a cada elemento no se respeta, sin embargo cuando es auto, sí y se distribuye.

align-self

Por último, la propiedad que vamos a ver ahora, es la que nos permite crear niños rebeldes. Es decir, si uno de los elementos, no queremos que se comporte cómo el resto, podemos con esta propiedad, sobreescribir su comportamiento respecto a los demás.

Si por ejemplo, tenemos que poner un elemento abajo del todo del contenedor, podemos indicarle que vaya abajo.

Veamos un ejemplo:

Hasta aquí, hemos visto cómo usar flex para crear un contenedor padre con diferentes elementos. Imaginemos ahora que nos plantean un diseño responsive, con 3 columnas, con texto en cada uno de ellos donde, en movil queremos que se cambie a una sola columna

Veamos, cómo realizar esto con flexbox

Además hemos puesto que a partir de 600px, el contenido salga cómo una columna.

Ahora imaginemos que sólo hay una columna, y queremos que nuestro texto salga completamente centrado.

En resumen, trabajar con flexbox, nos facilita el trabajo, trabajando más rápido y con la certeza de tener un responsive adecuado a todos los dispositivos.

Guia de introduccion a SASS para mejorar tu CSS

En el desarrollo web, las hojas de estilo CSS, cada vez son más complejas y extensas. Esto conlleva que el mantenimiento de los estilos en un proyecto de gran envergadura, sea cada vez más tedioso.

Una de las soluciones que hay para evitar esto, es el uso de preprocesadores, en este caso, del que vamos a hablar es SASS acrónimo de «Syntactically Awesome Style Sheets».

La gran cualidad de SASS es que te permite llevar tu CSS un paso más adelante, ya que entre otras cosas, permite reutilizar código, organizar las clases y permite trabajar mucho más rápido que con el CSS de forma tradicional.

Con SASS, y con SCSS concretamente (una de las sintaxis válidas de SASS), veremos que podemos generar o compilar nuestros archivos CSS, de una manera más limpia y organizada. ¡Todo ventajas!

Para ello, en lugar de trabajar sobre un archivo .css, trabajaremos con un archivo .scss, y con ayuda de un compilador, se generará el css final.

Uso de variables

Con SASS podemos usar variables, para definir cualquier valor que queramos. ¿Qué uso podemos darle a las variables en CSS?. Pongamos un ejemplo, supongamos que tenemos una hoja de estilo, con un conjunto de botones con un color. En caso de querer cambiar ese color, con cualquier editor, podemos reemplazar el códgio de color en todo el documento. Pero, alguna vez, puede darse el caso de que ese color se use también en algún otro elemento, y que este, o un conjunto de estos no quiera cambiarse. Si se usa SASS, se puede definir una variable color_botones y usarlo en todo el documento. Cambiar el color de estos botones, sólo sería cambiar esa variable.

SCSS

$color_botones: #F00;
.boton{
	background-color: $color_botones;
}

CSS resultante

.boton{
	background-color: #F00;
}

Nesting (anidación)

En una estructura de página HTML, donde muchos elementos estan unos dentro de otro, cómo por ejemplo, un menú, para dar estilo al último elemento anidado, se suele definir haciendo referencia a todos los padres de este elemento. Esto produce, definiciones cómo por ejemplo:

nav ul li a{
	// ...
}

En caso de querer dar estilo a los elementos padres, por llevar un orden, se suele hacer lo siguiente:

nav{
	// ...
}
nav ul{
	// ...
}
nav ul li{
	// ...
}

Esto genera páginas CSS complicadas de mantener, donde SASS ofrece, una forma más clara de trabajar ya que nos permite, al igual que en HTML, anidar nuestros estilos. Veamos un ejemplo donde podréis ver claramente cómo funciona:

SCSS

nav{
	ul{
		margin: 0;
		padding: 0;
		li{
			a{
				color: blue;
			}
		}
	}	
}

CSS resultante

nav ul {
	margin: 0;
	padding: 0;
}
nav ul li a{
	color: blue;
}

Pero además, antes de pasar al siguiente punto, destacar, que también se puede usar @media de forma anidada. Es decir, podemos crear media querys, para cada regla, manteniendo todo el código ordenado.

SCSS

.box{
	background-color: #000;
	@media (min-width: 1024px){
		width: 960px;
		margin: 0 auto;
	}
	@media (max-width: 1024px){
		width: 96%;
		margin: 0 auto;
	}	
}

CSS resultante:

.box{
	background-color: #000;
}
@media (min-width: 1024px){
	.box{
		width: 960px;
		margin: 0 auto;
	}
}
@media (max-width: 1024px){
	.box{
		width: 96%;
		margin: 0 auto;
	}
}

Esto, crea la posibilidad de mantener un CSS limpio ante un diseño responsive. También nos permitirá leer el css y encontrar todo los relacionado con una clase de forma más rápida.

Selector Padre => &

El selector padre significa, que si hacemos uso de &, estaremos haciendo referencia al elemento padre (siempre que estemos anidando las clases). Es útil, para hacer definiciones :hover, :after, :before entre otros.

También puede usarse cómo prefijo y sufijo.

Veamos unos ejemplos:

SCSS

a{
	font-weight: bold;
	text-decoration: none;
	&:hover{ 
		text-decoration: underline; 
	}
	li &{
		color: red;
	}
}

CSS resultante:

a{
	font-weight: bold;
	text-decoration: none;
}
a:hover{
	text-decoration: underline; 
}
li a{
	color: red;
}

En este último ejemplo, & hace referencia a «a», por lo que el css resultante, «a» sustituye a &.

Veamos otro ejemplo, donde se usa & cómo sufijo de una definición.

SCSS

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

CSS resultante:

#main {
  color: black; 
}
#main-sidebar {
	border: 1px solid; 
}

De nuevo, otra característica de SASS que nos permite tener CSS más limpio y manejable.

Propiedades anidadas

Nuevamente, podemos anidar partes de nuestros CSS. En este caso, no se refiere a las reglas, sino a las propias propiedades que pertenezcan a un mismo conjunto. Es el caso de «font», donde se pueden usar font-family, font-size, font-weight o el de background, cómo background-color, background-size, background-position…

SCSS

.font-definition{
	font:{
		family: Lato;
		size: 24px;
		weight: bold;
	}
}

CSS resultante

.font-definition{
	font-family: Lato;
	font-size: 24px;
	font-weight: bold;
}

Importar con @import

En cualquier proyecto, puede llegar el momento de querer trabajar con un archivo css para cada modulo, o dividir cada sección para que cada uno tenga su propio fichero css, manteniendo una mejor organización. Esto no es del todo óptimo, ya que cada fichero suma una petición a nuestro servidor, provocando que la carga de la web sea mayor.

Con SASS, sí que se puede hacer, ya que posteriormente al compilar, se generará un sólo archivo CSS con todo el contenido de los archivos. Por tanto podemos tener un archivo principal «base» que llame al resto, con la directiva:

@import ‘nombre_archivo’

El resultado, será el contenido de este «nombre_archivo» junto al resto del CSS. Nos permitirá tener un CSS organizado a nuestro gusto.

Mixins con @mixin

Los mixins, tienen un concepto muy parecido a lo que sería una función. Nos permite definir estilos que posteriormente se pueden reutilizar. Pueden llevar variables para tener más dinamismo.

Uno de los usos más extendidos, es crear mixins para gestionar los prefijos de los navegadores. Si queremos un boton con esquinas redondas, podemos crear el siguiente mixins

@mixin border-radius($radius){
	-webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

El uso de este mixins, es así de sencillo:
SCSS

.mi-boton{
	@include border-radius(10px);
}

CSS resultante

.mi-boton{
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

Una vez definido el mixin, podemos usarlo en cualquier parte del CSS, ahorrandonos varias líneas.

Veamos ahora un ejemplo de un mixin sin uso de variables

@mixin texto-grande{
	font:{
		family: Roboto;
		size: 40px;
		weight: bold;
	}
}
h1{
	@include texto-grande;
	color: blue;
}

dando cómo resultado

h1{
	font-family: Roboto;
	font-size: 40px;
	font-weight: bold;
	color: blue;
}

Extend, la herencia de SASS

El concepto de extend, es el de extender una clase. Podemos definir, un conjunto de propiedades, y luego en otras clase, extender este conjunto y añadir nuevos atributos.

El siguiente ejemplo nos muestra cómo podemos extender una clase en otra:

SCSS

.mensaje{
	border: 3px solid black;
	padding: 20px;
	color: white;
}
.exito{
	@extend .mensaje{
		background-color: green;
	}
}
.error{
	@extend .mensaje{
		background-color: red;
	}
}

CSS resultante:

.mensaje{
	border: 3px solid black;
	padding: 20px;
	color: white;
}
.exito{
	border: 3px solid black;
	padding: 20px;
	color: white;
	background-color: green;
}
.error{
	border: 3px solid black;
	padding: 20px;
	color: white;
	background-color: red;
}

También puede extenderse de una clase ya extendida:


.mensaje{
	border: 3px solid black;
	padding: 20px;
	color: white;
}
.error{
	@extend .mensaje{
		background-color: red;
	}
}
.error-serio{
	@extend .error{
		font-size: 30px;
	}
}

Donde error-serio, tendrá todos los atributos de error, y a su vez de mensaje.

Instalación

Hasta aquí hemos visto conceptos de SASS, que ya podríamos empezar a usar en nuestros proyectos. Pero ahora falta uno de los puntos más importantes, ¿cómo pasamos de SCSS a un archivo CSS?

Koala
Koala

Mi recomendación, es que instaleis Koala. Podéis descargar el software desde su página oficial, http://koala-app.com/

No es sólo un compilador de SASS, sino que también permite compilar LESS, Compass y CoffeScript. Una vez instalado, tenéis que tener el programa abierto, para que vaya compilando. Para indicarle que tiene que compilar, hay que añadirle la carpeta donde están vuestros archivos SCSS, para ello hay que pulsar el botón con + y seleccionar la carpeta donde están vuestros archivos.

Una vez tengáis la carpeta añadida, si pulsais sobre un archivo SCSS, os saldrá un menú, con un conjunto de opciones. La opción de Compilación automática, os compilará el SCSS en CSS cada vez que guardéis el archivo. Además, hay un conjunto de opciones con las que podéis jugar, y por último, un select para indicar cómo queréis compilar el CSS ,nested, expanded, compact o compressed (mejor opción para reducir el tiempo de carga).

¿Tienes alguna incidencia?

Cuéntanos qué ocurre
y nos pondremos con ello lo antes posible.

Este sitio está protegido por reCAPTCHA, y la Política de privacidad y Términos de servicio de Google.
Sucríbete a
nuestra newsletter

para estar al día en el mundo online

¡Cuéntanos tus ideas!
+34 96 653 19 14
+info@acceseo.com
He leído y acepto la política de privacidad

Este sitio está protegido por reCAPTCHA, y la Política de privacidad y Términos de servicio de Google.