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

# Justify-content 

Let's recall the properties of the main axis and the cross axis of a Flex container: 

- If the `flex-direction` property is `row` or `row-reverse`, the main axis is horizontal. Otherwise, the main axis is vertical. 
- If the `flex-direction` property is `column` or `column-reverse`, the main axis is vertical.  Otherwise, the main axis is horizontal.

Let's recall the previous exercise, but this time, we will only display the `600px` breakpoint:  

<html>
 <head>
 </head>
 <body>
    <div class="flex-container">
      <div class="flex-item">First</div>
      <div class="flex-item">Second</div>
    </div>
    <div class="flex-container">
      <div class="flex-item">Third</div>
      <div class="flex-item">Fourth</div>
    </div>
    <div class="flex-container">
      <div class="flex-item">Fifth</div>
      <div class="flex-item">Sixth</div>
    </div>
 </body>
</html>

body {
  min-width: 600px;
  background-color: lightblue;
}

.flex-item {
  width: 250px;
  margin: 25px;
  height: 200px;
  background-color: orange;
  box-sizing: border-box;
  border: 1px solid black;
}

.flex-container {
  display: flex;
}



codemirror

The problem with this layout is that the two boxes are left-aligned. We could play around with the widths, margins, and paddings to change this, but it would be a lot easier to control alignment on the container level. 

This is exactly why `justify-content` is useful. 

> `justify-content` defines the alignment of flex-items on the main axis of a flex-container.

The `justify-content` property has the following values: 

| Property     |                                                                                                                                                                                                                                                            Description | 
|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--| 
| flex-start              |     Flex-items are aligned to the left of a flex-container. This is the default value of justify-content                                                                                                                                                  |  | 
| flex-end                |     Flex-items are aligned to the right of a flex-container.                                                                                                                                                                                              |  | 
| center                  |     Flex-items are centered inside a flex-container.                                                                                                                                                                                                      |  | 
| space-between           |     All empty space is equally distributed around each flex item such that the same amount of space is added between adjacent elements. There is no space allocated on the left of the first element and on the right of the last element in a container. |  | 
| space-around            |     All empty space is equally distributed around each flex item such that the same amount of empty space is added to the left and to the right of each flex item.                                                                                        |  | 
| space-evenly            |     All empty space inside a container is distributed around each flex item such that the same amount of empty space is added between two adjacent elements and before the first element and after the last element.                                      |  | 



Let's intuitively understand the settings via an example.

We will use the following markup:  

```html 
<div class="flex-container">
  <div class="flex-item">First</div> 
  <div class="flex-item">Second</div> 
  <div class="flex-item">Third</div> 
  <div class="flex-item">Fourth</div> 
</div>
```

We will use the following styles: 

```css 
.flex-item {
  width: 100px;
  height: 50px;
  background-color: darkgreen;
  color: white;
  font-weight: bold;
  box-sizing: border-box;
  border: 5px solid grey;
  padding: 10px;
}

.flex-container {
  display: flex;
  width: 800px;
  box-sizing: content-box;
  margin: 0 auto;
  border: 1px solid black;
  background-color: lightgreen;
}

.flex-end {
  justify-content: flex-end;
}

.center {
  justify-content: center;
}

.space-between {
  justify-content: space-between;
}

.space-around {
  justify-content: space-around;
}

.space-evenly {
  justify-content: space-evenly;
}
```

Let's create an example for each justify-content variant: 




The problem with this layout is that the two boxes are left-aligned. We could play around with the widths, margins, and paddings to change this, but it would be a lot easier to control alignment on the container level. 

This is exactly why `justify-content` is useful. 

> `justify-content` defines the alignment of flex-items on the main axis of a flex-container.

The `justify-content` property has the following values: 

| Property     |                                                                                                                                                                                                                                                            Description | 
|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--| 
| flex-start              |     Flex-items are aligned to the left of a flex-container. This is the default value of justify-content                                                                                                                                                  |  | 
| flex-end                |     Flex-items are aligned to the right of a flex-container.                                                                                                                                                                                              |  | 
| center                  |     Flex-items are centered inside a flex-container.                                                                                                                                                                                                      |  | 
| space-between           |     All empty space is equally distributed around each flex item such that the same amount of space is added between adjacent elements. There is no space allocated on the left of the first element and on the right of the last element in a container. |  | 
| space-around            |     All empty space is equally distributed around each flex item such that the same amount of empty space is added to the left and to the right of each flex item.                                                                                        |  | 
| space-evenly            |     All empty space inside a container is distributed around each flex item such that the same amount of empty space is added between two adjacent elements and before the first element and after the last element.                                      |  | 



Let's intuitively understand the settings via an example.

We will use the following markup:  

```html 
<div>
  <div>First</div> 
  <div>Second</div> 
  <div>Third</div> 
  <div>Fourth</div> 
</div>
```

We will use the following styles: 

```css 
.flex-item {
  width: 100px;
  height: 50px;
  background-color: darkgreen;
  color: white;
  font-weight: bold;
  box-sizing: border-box;
  border: 5px solid grey;
  padding: 10px;
}

.flex-container {
  display: flex;
  width: 800px;
  box-sizing: content-box;
  margin: 0 auto;
  border: 1px solid black;
  background-color: lightgreen;
}

.flex-end {
  justify-content: flex-end;
}

.center {
  justify-content: center;
}

.space-between {
  justify-content: space-between;
}

.space-around {
  justify-content: space-around;
}

.space-evenly {
  justify-content: space-evenly;
}
```

Let's create an example for each justify-content variant: 




This lesson will introduce you to the justify-content Flexbox container settings. We will learn the possible values of justify-content to position our Flexbox items on the main axis.

Getting Started

Using Flexbox Containers

Aligning Individual Flexbox Items

Designing a Mobile-first Website Using Flexbox

Flexbox Conclusion and Next Steps

Justify-content