Căn chỉnh các phần tử

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

Trong CSS, thuộc tính align-items kiểm soát cách các phần tử flex được căn chỉnh theo trục phụ (ngược với trục chính). Thuộc tính này giúp định vị các phần tử theo chiều dọc trong một hàng hoặc theo chiều ngang trong một cột. Thuộc tính này hữu ích khi tạo bố cục linh hoạt và thích ứng hơn.

Đây là cú pháp cơ bản để sử dụng thuộc tính align-items:

.container {
    display: flex;
    align-items: value;
}

value: Cách căn chỉnh mong muốn cho các phần tử flex dọc theo trục chéo, có thể là một trong các giá trị sau:

stretch: Đây là giá trị mặc định. Các phần tử flex được kéo giãn để lấp đầy vùng chứa dọc theo trục chéo, đồng thời tuân theo min-width/max-width và min-height/max-height.

flex-start: Các mục flex được đặt ở đầu trục ngang.

flex-end: Các phần tử flex được đặt ở cuối trục phụ.

center: Các phần tử Flex được căn giữa theo trục vuông góc (cross axis).

baseline: Các phần tử Flex được căn chỉnh sao cho các đường cơ sở của chúng thẳng hàng.

Ví dụ:

.container-start {
    display: flex;
    align-items: flex-start;
}

.container-center {
    display: flex;
    align-items: center;
}

Trong ví dụ này, phần tử .container-start sẽ căn các mục flex về đầu trục chéo, còn phần tử .container-center sẽ căn giữa các mục flex dọc theo trục chéo.

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có hai phần tử <div>, mỗi phần tử chứa ba phần tử con.

Làm theo các bước sau:

Tạo kiểu cho phần tử .seas:
- Viết quy tắc CSS áp dụng cho phần tử <div> có lớp .seas.
- Đặt display thành flex để cho phép định vị linh hoạt các phần tử con.
- Đặt thuộc tính align-items thành center để căn các mục flex vào giữa trục ngang.
Tạo kiểu cho phần tử .oceans:
- Viết quy tắc CSS áp dụng cho phần tử <div> có lớp .oceans.
- Đặt display thành flex để cho phép định vị linh hoạt các phần tử con.
- Đặt thuộc tính align-items thành flex-end để căn các mục flex về cuối trục ngang.

Tự làm thử

<html>
<head>
    <title>Align Items</title>
    <style>
        .container {
            display: flex;
            height: 200px; /* Added for visualization */
            border: 2px solid darkblue; /* Added for visualization */
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="seas">
            <div>Black Sea</div>
            <div>Caribbean Sea</div>
            <div>Dead Sea</div>
        </div>
        <div class="oceans">
            <div>Atlantic Ocean</div>
            <div>Pacific Ocean</div>
            <div>Indian Ocean</div>
        </div>
    </div>
</body>
</html>