Cách chỉ định loại hộp cho phần tử HTML với CSS (display)

Giới thiệu

Sử dụng thuộc tính display để chỉ định loại hộp được sử dụng cho phần tử HTML.

Ví dụ

Ví dụ triển khai thuộc tính display để hiển thị flex container:

<!DOCTYPE html>
<html>
<head>
    <style>
        .mycontainer {
            display: flex;
            height: 300px;
            background-color: orange;
        }
        .mycontainer > div {
            background-color: white;
            text-align: center;
            line-height: 90px;
            font-size: 40px;
            width: 100px;
            margin: 50px;
        }
    </style>
</head>
<body>
    <h1>Quiz</h1>
    <div class="mycontainer">
        <div>Q1</div>
        <div>Q2</div>
        <div>Q3</div>
        <div style="align-self: center">Q4</div>
        <div>Q5</div>
    </div>
</body>
</html>