BananaMaster

8 Flexbox and How display: flex, 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

Four identical blocks are evenly distributed across the full width of the container.

• Use only px for all sizes.

✏️ Task 2

Three blocks are stacked one below another and are centered horizontally within the container.

• Choose the sizes yourself.

✏️ Task 3

Three blocks are stacked one below another. The first touches the top edge, the second is in the middle, the third touches the bottom edge.

• Use px for all element sizes.

✏️ Task 4

Three blocks are placed at the bottom edge of the container.

• Use only px for all sizes.

✏️ Task 5

Four blocks are placed at the bottom edge of the container and evenly spaced.

• Use only px for all sizes.

✏️ Task 6

One tall block is on the left. On the right — two blocks stacked one below another. The top one touches the top edge, the bottom one — the bottom edge.

• Use nested Flexbox.

✏️ Task 7

The container is made of two parts. On the left there are two blocks — one on top, one below. On the right there is one block, placed exactly in the center.

• Use several Flex containers.

✏️ Task 8

A card sits in the center of a large container. Inside the card three blocks are stacked one below another. The top one touches the top edge of the card, the bottom one — the bottom edge, and all blocks are centered horizontally.

• Use nested Flex containers.

✏️ Task 9

Repeat the layout of the blocks.

• 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.