Căn chỉnh nội dung

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

Trong CSS, thuộc tính justify-content kiểm soát cách các mục flex được phân bố dọc theo trục chính của vùng chứa flex. Thuộc tính này giúp căn chỉnh các mục và phân bổ khoảng trống còn lại khi có không gian dư. Thuộc tính này hữu ích để định vị các mục theo chiều ngang (trong một hàng) hoặc chiều dọc (trong một cột), giúp bố cục linh hoạt và thích ứng tốt hơn.

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

.container {
    display: flex;
    justify-content: value;
}

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

flex-start: Đây là giá trị mặc định. Các mục được dồn về phía đầu dòng.

flex-end: Các mục được dồn về cuối dòng.

center: Các mục được căn giữa theo đường.

space-between: Các mục được phân bố đều dọc theo đường thẳng, mục đầu tiên ở đầu và mục cuối cùng ở cuối.

space-around: Các mục được phân bố đều dọc theo dòng, với khoảng cách bằng nhau xung quanh mỗi mục.

space-evenly: Các mục được phân bố sao cho khoảng cách giữa hai mục bất kỳ và khoảng cách đến các cạnh đều bằng nhau.

Ví dụ:

.container-start {
    display: flex;
    justify-content: flex-start;
}

.container-center {
    display: flex;
    justify-content: center;
}

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

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 (<div>). Các phần tử cha đã được thiết lập làm vùng chứa flex bằng display: flex;. Nhiệm vụ của bạn là dùng thuộc tính justify-content để căn chỉnh các mục flex dọc theo trục chính. Hãy làm theo các bước sau:

Viết quy tắc CSS nhắm đến phần tử <div> có lớp fruits.
Đặt thuộc tính justify-content của phần tử .fruits thành center để căn giữa các mục flex dọc theo trục chính.
Viết quy tắc CSS nhắm đến phần tử <div> có lớp vegetables.
Đặt thuộc tính justify-content của phần tử .vegetables thành space-between để phân bố các mục flex dọc theo trục chính.

Tự làm thử

<html>
<head>
    <title>Justify Content</title>
    <style>
        .fruits, .vegetables {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="fruits">
        <div>Apple</div>
        <div>Banana</div>
        <div>Mango</div>
    </div>
    <div class="vegetables">
        <div>Tomato</div>
        <div>Potato</div>
        <div>Cucumber</div>
    </div>
</body>
</html>