Fruit Arrangement with CSS Flexbox

CSSCSSBeginner
Practice Now

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

finished

๐ŸŽฏ 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.

unfinished

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:

  1. Open the index.css file in your editor.
  2. Target the .yellow class and set the align-self property to flex-end.
  3. 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:

finished
โœจ Check Solution and Practice

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.

Other CSS Tutorials you may like