Tutorial de arreglo de frutas con CSS Flexbox | Diseño de layout reactivo

Introducción

En este proyecto, aprenderás a usar CSS Flexbox para crear un diseño de arreglo de frutas. Aprenderás a usar las propiedades align-self y order para posicionar y organizar las frutas en los platos.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

Cómo configurar la estructura HTML para el arreglo de frutas
Cómo usar la propiedad align-self para alinear elementos flexibles individuales a lo largo del eje transversal
Cómo usar la propiedad order para cambiar el orden de los elementos flexibles
Cómo organizar las frutas en el diseño deseado usando Flexbox

🏆 Logros

Después de completar este proyecto, podrás:

Usar CSS Flexbox para crear un diseño reactivo y visualmente atractivo
Aplicar las propiedades align-self y order para controlar la posición y el arreglo de los elementos
Trabajar con selectores y propiedades de CSS para lograr el diseño deseado

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css/BasicConceptsGroup -.-> css/properties("Properties") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/flexbox("Flexbox") subgraph Lab Skills css/properties -.-> lab-300076{{"Arreglo de frutas con CSS Flexbox"}} css/box_model -.-> lab-300076{{"Arreglo de frutas con CSS Flexbox"}} css/width_and_height -.-> lab-300076{{"Arreglo de frutas con CSS Flexbox"}} css/display_property -.-> lab-300076{{"Arreglo de frutas con CSS Flexbox"}} css/flexbox -.-> lab-300076{{"Arreglo de frutas con CSS Flexbox"}} end

Configurar la estructura del proyecto

En este paso, aprenderás cómo configurar la estructura del proyecto.

Para comenzar, abre el editor. Deberías ver algunos archivos: index.html, style.css e images en tu editor.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Estilizar el arreglo de frutas

En este paso, aprenderás cómo usar las propiedades align-self y order para estilizar el arreglo de frutas. Sigue los pasos siguientes para completar este paso:

Abre el archivo index.css en tu editor.
Selecciona la clase .yellow y establece la propiedad align-self en flex-end.
Establece la propiedad order de la clase .yellow en 1.

Tu archivo index.css ahora debería verse así:

.yellow {
  align-self: flex-end;
  order: 1;
}

La propiedad align-self se utiliza para alinear los elementos flexibles individuales a lo largo del eje transversal, anulando el valor de align-items. En este caso, la establecemos en flex-end para alinear la fruta amarilla en la parte inferior del plato.

La propiedad order se utiliza para cambiar el orden de los elementos flexibles. La establecemos en 1 para la fruta amarilla, lo que la colocará al final del contenedor flexible.

El resultado final es el siguiente:

✨ Revisar Solución y Practicar

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.