Thử thách Flexbox

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 49 trên 76.

Thử thách

Dễ

Giờ đây, khi đã nắm vững những kiến thức cơ bản về Flexbox, bao gồm display: flex;, flex-direction, justify-content và align-items, bạn hãy thử sức với một thử thách toàn diện. Thử thách này sẽ giúp bạn củng cố hiểu biết về cách kết hợp các thuộc tính này để tạo bố cục linh hoạt và thích ứng. Bạn sẽ vận dụng những gì đã học về từng thuộc tính để tái tạo một thiết kế cụ thể.

Bạn được cung cấp một tài liệu HTML có một phần tử cha (<div>) chứa bốn phần tử con (<div>). Nhiệm vụ của bạn là dùng các thuộc tính Flexbox đã học để tạo kiểu cho những phần tử này sao cho khớp với thiết kế trong hình bên dưới:

Thực hiện các bước sau:

Viết quy tắc CSS nhắm đến phần tử <div> có lớp container.
Đặt thuộc tính display của phần tử .container thành flex để biến phần tử này thành vùng chứa flex.
Đặt thuộc tính flex-direction của phần tử .container thành row-reverse để sắp xếp các mục flex theo hàng từ phải sang trái.
Đặt thuộc tính justify-content của phần tử .container thành space-between để phân bố đều các mục flex với khoảng trống giữa chúng.
Đặt thuộc tính align-items của phần tử .container thành flex-end để căn các mục flex về cuối trục vuông góc.
Viết các quy tắc CSS để tạo kiểu cho từng mục flex (item1, item2, item3, item4) bằng các màu nền và kích thước khác nhau (sử dụng các giá trị padding khác nhau) như trong hình.

Tự làm thử

<html>
<head>
    <title>Flex Box Challenge</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
        <div class="item4">Item 4</div>
    </div>
</body>
</html>