CSS Flexbox Fruit Arrangement Tutorial | Responsive Layout Design

Introduction

In this project, you will learn how to use CSS Flexbox to create a fruit arrangement layout. You will learn how to use the align-self and order properties to position and arrange the fruits in the bowls.

👀 Preview

🎯 Tasks

In this project, you will learn:

How to set up the HTML structure for the fruit arrangement
How to use the align-self property to align individual flex items along the cross axis
How to use the order property to change the order of flex items
How to arrange the fruits in the desired layout using Flexbox

🏆 Achievements

After completing this project, you will be able to:

Use CSS Flexbox to create a responsive and visually appealing layout
Apply the align-self and order properties to control the positioning and arrangement of elements
Work with CSS selectors and properties to achieve the desired design

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/AdvancedLayoutGroup(["`Advanced Layout`"]) css(("`CSS`")) -.-> css/CodingStandardsandBestPracticesGroup(["`Coding Standards and Best Practices`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/AdvancedLayoutGroup -.-> css/flexbox("`Flexbox`") css/CodingStandardsandBestPracticesGroup -.-> css/comments("`Comments`") subgraph Lab Skills css/selectors -.-> lab-300076{{"`Fruit Arrangement with CSS Flexbox`"}} css/flexbox -.-> lab-300076{{"`Fruit Arrangement with CSS Flexbox`"}} css/comments -.-> lab-300076{{"`Fruit Arrangement with CSS Flexbox`"}} end

Set Up the Project Structure

In this step, you will learn how to set up the project structure.

To get started, open the editor. You should see some files — index.html、style.css and images from your editor.

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open "Web 8080" on the top of the VM and refresh it manually and you will see the page.

Style the Fruit Arrangement

In this step, you will learn how to use the align-self and order properties to style the fruit arrangement. Follow the steps below to complete this step:

Open the index.css file in your editor.
Target the .yellow class and set the align-self property to flex-end.
Set the order property of the .yellow class to 1.

Your index.css file should now look like this:

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

The align-self property is used to align the individual flex items along the cross axis, overriding the align-items value. In this case, we set it to flex-end to align the yellow fruit at the bottom of the bowl.

The order property is used to change the order of the flex items. We set it to 1 for the yellow fruit, which will place it at the end of the flex container.

The finished result is as follows:

✨ Check Solution and Practice