Diseño de Interfaces Web

Sitemap

Práctica: Propiedades display: flex y flex

Práctica para entender las propiedades básicas de un contendor flexible.

Contenedor con propiedad display: flex

1
1
1

Contenedor flexible sin la propiedad wrap

1
1
1
1
1
1
1
1
1
1
1
1
1
1
1

Contenedor flexible con la propiedad wrap

1
1
1
1
1
1
1
1
1
1
1
1
1
1
1

Contenedor flexible con elemento centrado horizontal y verticamente

justify-content: center; align-items: center;

Elementos con flex-grow

avatar

flex-grow: 5;

El elemento crece 5 veces más que los otros para rellenar el espacio. Por defecto es 0.

flex-grow: 1;

avatar

flex-grow: 5;

El elemento crece 5 veces más que los otros para rellenar el espacio. Por defecto es 0.
1

Elemento con flex-shrink

1
-2
1
1
1
1
1
1
1
1
1
1
1
1
1

Elementos con flex-basis

avatar

flex-basis: 30rem;

Ancho inicial del elemento (flex-direction: row).
1

Contenedor flexible con propiedades en formato short

flex: 0 0 auto;
1
1
1
1
1
1
1
1
1
1
1
1
1
flex: 0 0;
flex: 4 0; /* flex-grow flex-shrink */
flex: 1 2 6.25rem; /* flex-grow flex-shrink flex-basis */