Gain insights into designing mobile-responsive web layouts using Flexbox. Delve into Box Model basics, Flexbox containers, and item alignment, and apply your knowledge to create stunning, mobile-first websites.

CBCA - CSS with Flexbox (Intermediate)-01.jpg

In this course, you will get hands-on experience in designing mobile-responsive web layouts using Flexbox. You will start with the basics like the Box Model and the process of layouting.

You will then move on to advanced concepts such as Flexbox containers, and aligning individual Flexbox items. Near the end of the course, you will put everything you just learned into practice. You will work on a project that focuses on developing a mobile-first website where you’ll experiment with page layout, headers, footers, and a lot more.

By the end of this course, you will be able to use Flexbox in your own projects to create beautiful layouts.

Designing Web Layouts with CSS and Flexbox

## Flex-direction exercise 

Let's put theory into practice by creating a Flexbox layout using flex-direction.

Complete the following exercise: 

- Create a Flexbox responsive layout. 
- The minimum width of the page should be 400 pixels. 
- Below the 600 pixels width, display six boxes below each other. Each box should contain the words `First`, `Second`, `Third`, `Fourth`, `Fifth`, `Sixth` in this order from top to bottom. 
- Below the 600 pixels screen width, each box is 400 pixels wide and is centered horizontally 
- The top and bottom margin around the boxes is 40px. 
- The height of each box is 200px.  
- At or above 600px width, each box is 250px wide and there is a 25px margin around the boxes. 
- Despite adding a 1px black border, two boxes should fit next to each other even at 600px page width.
- The boxes are aligned to the left 
- You are only allowed to use `display: flex;` and `flex-direction` settings from your Flexbox arsenal. 
- Colors: page background should be `lightblue`, the boxes have an `orange` background. 
- At or above the `900px` screen width, display the six boxes in two rows. The first row should contain the odd items (first, third, fifth), and the second row should contain the even items. 

Think about how you can display the items in both of the following order: 

```
First  Third  Fifth 
Second Fourth Sixth
```

and

```
Fifth Third  First
Sixth Fourth Second
```



Solve your exercise here: 

# Flex-direction exercise 

Let's put theory into practice by creating a Flexbox layout using flex-direction.

Complete the following exercise: 

- Create a Flexbox responsive layout. 
- The minimum width of the page should be 400 pixels. 
- Below the 600 pixels width, display six boxes below each other. Each box should contain the words `First`, `Second`, `Third`, `Fourth`, `Fifth`, `Sixth` in this order from top to bottom. 
- Below the 600 pixels screen width, each box is 400 pixels wide and is centered horizontally 
- The top and bottom margin around the boxes is 40px. 
- The height of each box is 200px.  
- At or above 600px width, each box is 250px wide and there is a 25px margin around the boxes. 
- Despite adding a 1px black border, two boxes should fit next to each other even at 600px page width.
- The boxes are aligned to the left 
- You are only allowed to use `display: flex;` and `flex-direction` settings from your Flexbox arsenal. 
- Colors: page background should be `lightblue`, the boxes have an `orange` background. 
- At or above the `900px` screen width, display the six boxes in two rows. The first row should contain the odd items (first, third, fifth), and the second row should contain the even items. 

Think about how you can display the items in both of the following order: 

```
First  Third  Fifth 
Second Fourth Sixth
```

and

```
Fifth Third  First
Sixth Fourth Second
```



Solve your exercise here: 

This lesson is an exercise to get hands-on practice with the basic Flexbox container settings.

Getting Started

Using Flexbox Containers

Aligning Individual Flexbox Items

Designing a Mobile-first Website Using Flexbox

Flexbox Conclusion and Next Steps

Flex-direction Exercise

Flex-direction exercise