Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Justificar Contenido Horizontalmente | Flexbox
course content

Contenido del Curso

CSS Fundamentals

1. Introducción a CSS

¿Qué es CSS?Conectando HTML y CSSSelectores para Estilizar Elementos HTMLDesafío: Agrega Tus Primeros EstilosDesafío: Agregar los estilos utilizando el nombre de la claseClases Pseudo de Acción del UsuarioReto: Clases de Pseudo-Clases de Acción del UsuarioColores de TextoTrabajo Efectivo con CSSDesafío: Variables en CSS

2. Estilos de Texto

Estilo del TextoFormateo de TextoDesafío: Formato de TextoAñadir Tipografías Personalizadas a la Página WebPropiedades de la FuenteDesafío: Fuentes

3. Modelo de Caja y Espaciado de Elementos

Modelo de CajaDimensionamiento de CajaAñadir Espacio a ElementosDesafío: Ajuste del Tamaño del CuadroClases Pseudo Estructurales y FuncionalesDesafío: Pseudo-Clases EstructuralesTipos de ElementosTrabaja con Elementos de Nivel de BloqueTrabaja con Elementos en LíneaDesafío: Predecir la Disposición de la Página

4. Flexbox

¿Qué es Flexbox?Dirección de FlexiónJustificar Contenido HorizontalmenteAlinear elementos verticalmentePropiedades de Ítem FlexibleDesafío: FlexboxDesafío: Trabajar con Flexbox

5. Efectos Decorativos

Color de FondoImagen de fondoTrabajar con ImágenesElementos Pseudo-DecorativosSombrasDesafío: Efectos DecorativosPasos Adicionales

CSS Fundamentals

Justificar Contenido HorizontalmenteJustificar Contenido Horizontalmente

La propiedad justify-content es fundamental para determinar la posición de los elementos flex a lo largo del eje principal. Su valor por defecto es flex-start. css justify-content: flex-start | flex-end | center | space-between | space-around;

justify content

Consideremos cada caso en la práctica. Vamos a jugar con la lista de tarjetas.

flex-start

Valor por defecto, que hace que todos los elementos estén al inicio del eje principal.

html

index.html

css

index.css

js

index.js

flex-end

Todos los elementos están en el extremo del eje.

html

index.html

css

index.css

js

index.js

centro

Todos los elementos están en el centro.

html

index.html

css

index.css

js

index.js

Espacio alrededor

Distribuye todos los elementos uniformemente a lo largo del eje principal dejando un poco de espacio en cada extremo.

html

index.html

css

index.css

js

index.js

espacio-entre

Es muy similar a espacio-alrededor excepto que no deja espacio en el eje en ambos extremos.

html

index.html

css

index.css

js

index.js

¿Cuál de los siguientes valores de la propiedad justify-content alineará los elementos flex a lo largo del centro de un contenedor flex?

Selecciona la respuesta correcta

¿Todo estuvo claro?

Sección 4. Capítulo 3
course content

Contenido del Curso

CSS Fundamentals

1. Introducción a CSS

¿Qué es CSS?Conectando HTML y CSSSelectores para Estilizar Elementos HTMLDesafío: Agrega Tus Primeros EstilosDesafío: Agregar los estilos utilizando el nombre de la claseClases Pseudo de Acción del UsuarioReto: Clases de Pseudo-Clases de Acción del UsuarioColores de TextoTrabajo Efectivo con CSSDesafío: Variables en CSS

2. Estilos de Texto

Estilo del TextoFormateo de TextoDesafío: Formato de TextoAñadir Tipografías Personalizadas a la Página WebPropiedades de la FuenteDesafío: Fuentes

3. Modelo de Caja y Espaciado de Elementos

Modelo de CajaDimensionamiento de CajaAñadir Espacio a ElementosDesafío: Ajuste del Tamaño del CuadroClases Pseudo Estructurales y FuncionalesDesafío: Pseudo-Clases EstructuralesTipos de ElementosTrabaja con Elementos de Nivel de BloqueTrabaja con Elementos en LíneaDesafío: Predecir la Disposición de la Página

4. Flexbox

¿Qué es Flexbox?Dirección de FlexiónJustificar Contenido HorizontalmenteAlinear elementos verticalmentePropiedades de Ítem FlexibleDesafío: FlexboxDesafío: Trabajar con Flexbox

5. Efectos Decorativos

Color de FondoImagen de fondoTrabajar con ImágenesElementos Pseudo-DecorativosSombrasDesafío: Efectos DecorativosPasos Adicionales

CSS Fundamentals

Justificar Contenido HorizontalmenteJustificar Contenido Horizontalmente

La propiedad justify-content es fundamental para determinar la posición de los elementos flex a lo largo del eje principal. Su valor por defecto es flex-start. css justify-content: flex-start | flex-end | center | space-between | space-around;

justify content

Consideremos cada caso en la práctica. Vamos a jugar con la lista de tarjetas.

flex-start

Valor por defecto, que hace que todos los elementos estén al inicio del eje principal.

html

index.html

css

index.css

js

index.js

flex-end

Todos los elementos están en el extremo del eje.

html

index.html

css

index.css

js

index.js

centro

Todos los elementos están en el centro.

html

index.html

css

index.css

js

index.js

Espacio alrededor

Distribuye todos los elementos uniformemente a lo largo del eje principal dejando un poco de espacio en cada extremo.

html

index.html

css

index.css

js

index.js

espacio-entre

Es muy similar a espacio-alrededor excepto que no deja espacio en el eje en ambos extremos.

html

index.html

css

index.css

js

index.js

¿Cuál de los siguientes valores de la propiedad justify-content alineará los elementos flex a lo largo del centro de un contenedor flex?

Selecciona la respuesta correcta

¿Todo estuvo claro?

Sección 4. Capítulo 3
some-alt