Curso CSS - Flexbox PDF

CURSO .
CSS
Flexbox
Autor: Jon Vadillo

www.jonvadillo.com
Contenidos
■ ¿Qué es Flexbox?
■ Conceptos básicos: contenedor y sus elementos
■ Propiedades del contenedor
■ Propiedades de los elementos
Flexbox
Método que pueda ayudar a alinear y distribuir el

espacio entre los elementos (items) de un
contenedor (container).
Container & Items
Container
Al asignar el valor flex o inline-flex a la propiedad display, los hijos
directos de este contenedor se convierten en ítems flex.
Hands on!
<div class="container">
.container { <div class="item">1</div>
display: flex; <div class="item">2</div>
} <div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
Propiedades del container
■ flex-direction
■ flex-wrap
■ flex-flow
■ justify-content
■ align-items
■ align-content
Eje principal y eje cruzado
Todo lo que hacemos con
flexbox está referido a estos
dos ejes: el eje principal y el
eje cruzado. El eje principal
se define con la propiedad
flex-direction y el cruzado
será perpendicular a este.
Eje principal y eje cruzado
flex-direction
flex-direction
Valores
row: de izquierda a derecha.
row-reverse: de derecha a
izquierda.
column: de arriba a abajo.
column-reverse: de arriba a abajo.
flex-direction
Hands on!
Contenedores multilínea: flex-wrap
Por defecto flexbox alínea

todos los elementos en una
única fila. Podemos cambiar
este comportamiento con
flex-wrap.
flex-wrap
Valores
no-wrap: todos los items en una única línea. Con esta propiedad los ítems
podrían salirse del margen si estos no pudieran contraerse, o no contraerse
lo suficiente para ser calzados.
wrap: cuando el contenedor flex contiene ítems que se les ha asignado un

ancho, donde el ancho total de los ítems excede al del contenedor flex, los
items se repartirán en las siguientes líneas.
wrap-reverse: se comporta igual que wrap pero los items se colocarán de

arriba a abajo.
Hands on!
flex-flow
Es una simple abreviación que permite indicar las propiedades
flex-wrap y flex-direction en una sola propiedad. El valor por
defecto es “row nowrap”
Justificación de los elementos
La propiedad justify-content es
usada para alinear los ítems en el
eje principal.
Valores
flex-start: alinea los ítems al inicio
del margen del contenedor.
flex-end: alinea los ítems al final
center: para alinearlos al centro.
Justificación de los elementos
Valores
space-between: distribuye los
ítems para que haya un espacio
equitativo entre cada ítem.
space-around: crea un espacio
equitativo a la derecha e izquierda
de cada ítem.
space-evenly: el espacio entre
elementos y los márgenes del
contenedor es equitativo.
Hands on!
Alineación de los elementos
La propiedad align-items es
usada para alinear los
ítems en el eje cruzado.
Normalmente se usa
cuando hay una única línea
(cuándo hay más de una, se
debe utilizar align-content).
Hands on!
Alineación de los elementos
La propiedad align-content
ajusta las líneas dentro de
un contenedor flex cuando
hay espacio extra en el eje
transversal.
Esta propiedad no tiene

efecto en cajas flexibles de
una sola línea.
Hands on!
Propiedades de los items
■ order
■ flex-grow
■ flex-shrink
■ flex-basis
■ flex
■ align-self
order
Por defecto los elementos se colocan
en el orden en el que se definen.
La propiedad order define el orden en
el que los elementos se colocan en el
contenedor.
order
Los elementos se colocarán

en orden ascendente según
el valor de order.
Los items con el mismo valor
de order se colocarán en el
orden en el cual aparecen en
el código fuente.
Hands on!
align-self
La propiedad align-self permite

alinear un elemento de la forma
deseada y sobre-escribir lo indicado
mediante la propiedad align-items .
Posibles valores:
auto | flex-start | flex-end | center |
baseline | stretch;
¡Importante!
El valor por defecto de la propiedad

align-self es strech, es decir, los
elementos cogen el ancho
máximo. Por
flex-grow
Por defecto los elementos se

colocan en el orden en el que se
definen.
La propiedad flex-grow especifica
qué cantidad de espacio debe
ocupar el elemento dentro del
contenedor flexible.
Hands on!
flex-basis
La propiedad de CSS flex-basis

especifica cual es el tamaño
inicial de un elemento, antes de
comenzar a distribuir el espacio
mediante otras propiedades.
Si su valor es auto, fijará su
ancho en función de la
propiedad width.
Hands on!
Columnas con misma anchura
Un layout típico es el de dos (o más)

columnas de la misma anchura.
.columna {
Esto podemos conseguirlo flex-grow: 1;
flex-basis: 0;
fácilmente combinando las
}
propiedades flex-grow y flex:basis
flex-shrink
La propiedad flex-shrink
indica cuánto encoger un
item cuando sea necesario
(cuando haya overflow).
Solo tiene sentido si se ha
indicado la propiedad
flex-basis. * El valor 0 indica que no se contraerá,
por lo que puede ocurrir overflow.
Hands on!
Play, Fun, Learn!
https://flexboxfroggy.com/#es http://www.flexboxdefense.com/
Ejercicio 1: Menú horizontal
■ Crea un menú como el de la imagen, compuesto por un logotipo, una

lista de elementos de navagación y dos enlaces para cambio de idioma.
■ La distancia entre bloques tiene que ser la misma.
■ Logotipo: http://throne.stonedthemes.com/wp-content/uploads/2015/08/logo.png
Ejercicio 2: Menú vertical
■ Crea un menú como

el de la imagen,
compuesto lista de
elementos, los cuales
contienen un texto y
un enlace.
Ejercicio 3: Centrar en página
■ Crea una página que

contenga un div
centrado vertical y
horizontalmente en
la página.
Ejercicio 4: Galería de imágenes adaptable
■ Crea una galería de

imágenes que se
adapte en función
del espacio
disponible.
<img src="https://via.placeholder.com/400x400.png?text=Aprende+Flexbox" alt="Photo de ejemplo">

Ejercicio 5: Layout de 3 columnas
Doble de ancho que el resto de columnas
NOTA: Utiliza la unidad “vh” para que la página ocupe toda la pantalla
Ejercicio 6: Pricing box
■ Totalmente centrado en la
página, cajas de mismo
tamaño, con sombra y
bordes redondeados.
■ Altura mínima de cada
caja: 480px
■ Colores:
○ Cabecera: salmon
○ Fondo: #93d9e9
Ejercicio 7: Layout completo
■ Crea una página como la de la imagen,

compuesta por: header, menú, barra lateral,
contenido tipo blog y footer.
■ El ancho máximo de la página completa será de
1000px, y la proporción de las columnas es
30%-70%.
■ El footer tiene que aparecer siempre al borde
inferior de la página.
Ejercicio 7: Layout completo
Sources
■ CSS Tricks:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
■ Mozilla MDN Web Docs: https://developer.mozilla.org/
■ Codepen: https://codepen.io/enxaneta/full/adLPwv/
■ CSSReference.io: https://cssreference.io/flexbox/

Curso CSS - Flexbox PDF

Cargado por

Copyright:

Formatos disponibles

Curso CSS - Flexbox PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso CSS - Flexbox PDF

Cargado por

Copyright:

Formatos disponibles

CURSO .

Autor: Jon Vadillo

Método que pueda ayudar a alinear y distribuir el

Por defecto ﬂexbox alínea

wrap: cuando el contenedor ﬂex contiene ítems que se les ha asignado un

wrap-reverse: se comporta igual que wrap pero los items se colocarán de

Esta propiedad no tiene

Los elementos se colocarán

La propiedad align-self permite

El valor por defecto de la propiedad

Por defecto los elementos se

La propiedad de CSS ﬂex-basis

Un layout típico es el de dos (o más)

■ Crea un menú como el de la imagen, compuesto por un logotipo, una

■ Crea un menú como

■ Crea una página que

■ Crea una galería de

<img src="https://via.placeholder.com/400x400.png?text=Aprende+Flexbox" alt="Photo de ejemplo">

Doble de ancho que el resto de columnas

■ Crea una página como la de la imagen,

También podría gustarte