BananaMaster

9 Flexbox and Deep Nesting - ( 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

One tall block is on the left. On the right there are three identical blocks stacked one below another. The first touches the top edge, the second is centered, the third touches the bottom edge.

• Use nested Flexbox.

✏️ Task 2

A card sits in the center of a large container. Inside the card, one block is on top, below that two blocks side by side, and at the bottom one more wide block.

• Use nested Flex containers.

✏️ Task 3

The container is split into three columns. On the left there are two blocks — top and bottom. In the middle there is one block in the center. On the right there are three identical blocks stacked one below another.

• Use several Flex containers.

✏️ Task 4

One wide block is on top. Below it there are two columns. The left column has three identical blocks stacked one below another. The right column has one tall block.

• Use nested Flexbox.

✏️ Task 5

The container is made of two parts. On the left there is one square block. On the right there are two rows. Each row has two identical blocks side by side.

• Use several levels of Flexbox.
• Use only px for all sizes.

✏️ Task 6

A card sits in the center of a large container. On top there are three small blocks in a row. In the middle there is one wide block. At the bottom there are again three small blocks in a row.

• Use nested Flexbox.

✏️ Task 7

Repeat the layout of the blocks.

• Use several nested Flex containers.
• Use only px for all sizes.

---

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.