CSS: Fundamentos de Flex

Incluido en el curso

Lo que aprenderás

• Aplicar propiedades básicas de CSS Flexible Box Layout.
• Controlar elementos HTML vertical y horizontalmente con Flex.
• Crear diseños adaptados para dispositivos móviles.
• Crear elementos flexibles que cambien de ancho y alto.

Descripción

En este curso aprenderás sobre CSS Flex. Descubrirás cómo posicionar elementos vertical y horizontalmente. Al final, aprenderás a posicionar elementos en la página, alinearlos y entender el sistema de creación de sistemas de columnas. Flex es útil si decides crear diseños adaptables y utilizar elementos flexibles. Los conocimientos de este curso ayudan a los programadores a controlar elementos en la página en dos ejes y alinear elementos en relación a ellos. Este curso es adecuado para principiantes que deseen aprender a crear sus primeros diseños. Para facilitar el aprendizaje, es recomendable tener conocimientos básicos de HTML y estilizar texto con CSS.

Programa del curso

• 1

  Introducción a Flex

  Aprende sobre el curso dedicado a Flex

  teoría
• 2

  ¿Qué es Flex?

  Aprende sobre el concepto de Flex, sus ventajas y escenarios de uso.

  teoría

  test

• 3

  Contenedor flex

  Familiarizarse con los contenedores flex y las posibilidades de definir el eje principal para renderizar elementos.

  teoría

  test

  ejercicio

• 4

  Mover elementos dentro de un contenedor

  Aprende sobre las formas de mover elementos dentro de un contenedor flex. Aprender a utilizar la propiedad flex-wrap.

  teoría

  test

  ejercicio

• 5

  Alineación de elementos en el eje principal

  Aprende sobre las formas de alinear elementos en el eje principal dentro de un contenedor flexible. Familiarízate con la propiedad justify-content.

  teoría

  test

  ejercicio

• 6

  Alineación de elementos en el eje transversal

  Aprende sobre las formas de alinear elementos en el eje transversal dentro de un contenedor flexible. Familiarízate con la propiedad align-items.

  teoría

  test

  ejercicio

• 7

  Propiedades de los elementos Flex. Flexibilidad. Flex-grow

  Aprende sobre las propiedades para trabajar con elementos dentro de contenedores flex. Estudia la propiedad Flex-grow.

  teoría

  test

  ejercicio

• 8

  Propiedades de los elementos Flex. Flexibilidad

  Aprender sobre las propiedades para trabajar con elementos dentro de contenedores flex. Estudiar las propiedades flex-shrink, flex-basis, flex.

  teoría

  test

  ejercicio

• 9

  Propiedades de los elementos Flex. Posicionamiento

  Aprende sobre las propiedades para trabajar con elementos dentro de contenedores flex. Estudia las propiedades order y align-self.

  teoría

  test

  ejercicio

• 10

  Materiales adicionales

  Artículos y videos seleccionados por el equipo de Códica. Te ayudarán a profundizar en el tema del curso.

Desafíos

Son ejercicios de mayor dificultad que pueden requerir conocimientos adicionales. Si no puedes resolverlos en este momento, no te preocupes. Busca información por tu cuenta o sigue avanzando en la carrera y regresa más adelante cuando te sientas listo.