BananaMaster

7 Flexbox and How display: flex, justify-content, align-items and flex-direction Work (HTML and CSS, Front End)

If you forgot something, click to go to the lesson

📘 Practical Tasks: Flexbox

For each task create separate classes in style.css and apply them to the correct tags.

📌 File structure: index.html + style.css

💡 Key rule: display: flex is always written on the parent, not on the child element.

✏️ Task 1 — flex-direction: row (default)

Three blocks stand in a row. Estimate the parent's size by eye:

• Parent — background: red, dimensions in px, add display: flex
• Child 1 — background: #e74c3c, dimensions in %
• Child 2 — background: #3498db, dimensions in %
• Child 3 — background: #2ecc71, dimensions in %
• Child 4 — background: #2c3e50, dimensions in %
• 💡 flex-direction: row is the default value — no need to write it

✏️ Task 2

Three blocks stand in a column. Estimate the parent's size by eye:

• Parent — background: green, dimensions in px
• Child 1 — background: #f39c12, dimensions in %
• Child 2 — background: #e74c3c, dimensions in %
• Child 3 — background: #1abc9c, dimensions in %
• Child 3 — background: #8e44ad, dimensions in %

✏️ Task 3

The block is aligned to the center horizontally. Estimate the sizes by eye:

• Parent — background: #2d3436, dimensions in px
• Child — background: #fdcb6e, dimensions in %

✏️ Task 4

The block is aligned to the right edge. Estimate the sizes by eye:

• Parent — background: #00b894, dimensions in px
• Child — background: #d63031, dimensions in %

✏️ Task 5

The block is aligned to the vertical center. Estimate the sizes by eye:

• Parent — background: #6c5ce7, dimensions in px
• Child — background: #fd79a8, dimensions in %

✏️ Task 6

The block is aligned to the bottom edge. Estimate the sizes by eye:

• Parent — background: #0984e3, dimensions in px
• Child — background: #ffeaa7, dimensions in %

✏️ Task 7

The block is placed exactly in the center both horizontally and vertically. Estimate the sizes by eye:

• Parent — background: #e17055, dimensions in px
• Child — background: #74b9ff, dimensions in %

✏️ Task 8

Three blocks — the outer ones are pressed to the edges, the middle one is in between. All are centered vertically. Estimate the sizes by eye:

• Parent — background: #2c3e50, dimensions in px
• Child 1 — background: #e74c3c, dimensions in %
• Child 2 — background: #f1c40f, dimensions in %
• Child 3 — background: #2ecc71, dimensions in %

✏️ Task 9

A column of two blocks is aligned to the bottom-right corner. Estimate the sizes by eye:

• Parent — background: #6c5ce7, dimensions in px
• Child 1 — background: #fd79a8, dimensions in %
• Child 2 — background: #00cec9, dimensions in %

✏️ Task 10

Two flex containers are nested inside one. Estimate the sizes by eye:

• Outer parent — background: #dfe6e9, dimensions in px, display: flex, justify-content: space-between
• Left block — background: #b2bec3, width in %, itself a flex container: flex-direction: column, justify-content: space-between
• Left → Child 1 — background: #e74c3c, dimensions in %
• Left → Child 2 — background: #3498db, dimensions in %
• Right block — background: #2d3436, width in %, itself a flex container: justify-content: center, align-items: center
• Right → Child — background: #fdcb6e, dimensions in %

📌 Important:
Each class is written separately in style.css.
Use HTML and CSS only.
Practice the properties: display: flex, flex-direction, justify-content, align-items.