Scribd
Cargar
20 vistas2 páginas

Flexbox

Este documento explica los conceptos básicos de Flexbox como el uso de flex-direction, justify-content y align-items para controlar la dirección del eje principal y la alineación de elementos. También cubre propiedades para items flex como flex-grow, flex-shrink y flex-basis.

Cargado por

Pata Duprins
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
20 vistas2 páginas

Flexbox

Este documento explica los conceptos básicos de Flexbox como el uso de flex-direction, justify-content y align-items para controlar la dirección del eje principal y la alineación de elementos. También cubre propiedades para items flex como flex-grow, flex-shrink y flex-basis.

Cargado por

Pata Duprins
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 2

Flexbox IDEP Barcelona

Diseño y Código I

FLEX CONTAINER

gap: 0; <length>
👉 Para crear espacio entre items, sin usar márgenes
justify-content: flex-start; flex-end | center | space-between | space-around | space-evenly
👉 Para alinear elementos a lo largo del eje principal (main axis)

align-items: stretch; flex-start | flex-end | center | baseline


👉 Para alinear elementos a lo largo del eje transversal (cross axis)

flex-direction: row; row-reverse | column | column-reverse


👉 Para definir cuál es el eje principal (main axis) y su dirección
flex-wrap: nowrap; wrap | wrap-reverse
👉 Para permitir que los elementos se agrupen en una nueva línea si son demasiado grandes

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


👉 Solo se aplica cuando hay varias líneas (flex-wrap: wrap)

developer.mozilla.org/es/docs/Web/CSS/flex
w3schools.com/css/css3_flexbox.asp
css-tricks.com/snippets/css/a-guide-to-flexbox
Flexbox IDEP Barcelona
Diseño y Código I

ESTRUCTURA

display: flex;
👉 Define un contenedor flex, permitiendo alinear a sus elementos hijo de la forma que determinemos

main axis

flex item flex item flex item flex item flex item

flex container cross axis

FLEX ITEMS

align-self: auto; stretch | flex-start | flex- end | center | baseline


👉 Para sobrescribir la propiedad align-items individualmente

flex-grow: 0; <integer>
👉 Para permitir que un elemento crezca (0 significa no, 1 o más significa sí)
flex-shrink: 1; <integer>
👉 Para permitir que un elemento se encoja (0 significa no, 1 o más significa sí)

flex-basis: auto; <length>


👉 Para definir el ancho de un elemento, en lugar de la propiedad de ancho (width)
flex: 0 1 auto; <int> <int> <len>
👉 Abreviación recomendada para las propiedades flex-grow, flex-shrink y flex-basis.
order: 0; <integer>
👉 Controla el orden de los elementos. Si no hay otras declaraciones, -1 sitúa el elemento en primera posición y 1 lo coloca en última
posición.

developer.mozilla.org/es/docs/Web/CSS/flex
w3schools.com/css/css3_flexbox.asp
css-tricks.com/snippets/css/a-guide-to-flexbox

También podría gustarte