Bootcamp
Search…
📅
Course Schedule
0: Language and Tooling Teaching Guide
1: Frontend Basics Teaching Guide
2: Backend Basics Teaching Guide
3: Backend Applications Teaching Guide
4: Backend Structure Teaching Guide
5: Full-Stack Applications Teaching Guide
6: Frontend Infrastructure Teaching Guide
7: React Teaching Guide
8: Advanced React Teaching Guide
9: Advanced Topics Teaching Guide
🧮
Algorithms Teaching Guide
💼
Interview Prep Teaching Guide
☺
User Experience Teaching Guide
CSS.3: Flexbox

Overview

This lesson will be do demonstrate how we can achieve moving the elements via flexbox

Pre-Class Material

Flexbox

The HTML starter code
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
<link rel="stylesheet" href="style.css" />
8
<title>Flexbox</title>
9
</head>
10
<body>
11
<!--
12
1. Move the box to the right of the screen
13
​
14
1.1 Using the margin property
15
​
16
1.2 Using the absolute property
17
​
18
1.3 Using the flex property
19
​
20
2. Move the box to the bottom left of the screen
21
​
22
3. Move the box to the bottom right of the screen
23
-->
24
<div class="box"></div>
25
</body>
26
</html>
27
​
Copied!
The CSS starter code
1
html,
2
body {
3
height: 100%;
4
}
5
​
6
body {
7
background-color: pink;
8
}
9
​
10
.box {
11
width: 200px;
12
height: 200px;
13
background-color: red;
14
}
15
​
Copied!

Move box to the right

Margin Example
1
.box {
2
width: 200px;
3
height: 200px;
4
background-color: red;
5
margin-left: auto;
6
}
Copied!
Position Example
1
.box {
2
width: 200px;
3
height: 200px;
4
background-color: red;
5
position: absolute;
6
right: 0;
7
}
Copied!
Flex Example
1
body {
2
background-color: pink;
3
display: flex;
4
justify-content: flex-end;
5
}
Copied!

Move box to the bottom left

Flex Example
1
body {
2
background-color: pink;
3
display: flex;
4
flex-direction: column;
5
justify-content: flex-end;
6
}
Copied!

Move box to the bottom right

Flex Example
1
body {
2
background-color: pink;
3
display: flex;
4
flex-direction: column;
5
justify-content: flex-end;
6
align-items: flex-end;
7
}
Copied!
Last modified 1mo ago