Tidadigi Logo

Advance CSS Layout with Flexbox

Flexbox là một mô hình bố cục CSS mạnh mẽ. Nó giúp đơn giản hóa việc tạo bố cục linh hoạt và thích ứng. Bạn có thể căn chỉnh và phân phối không gian giữa các phần tử. Điều này giúp quản lý các thiết kế phức tạp dễ dàng hơn.

Flexbox đặc biệt hữu ích khi xây dựng các thiết kế đáp ứng. Các thiết kế này thích ứng liền mạch với các kích thước màn hình khác nhau.

Layout Modes Before Flexbox

Trước khi Flexbox ra đời, CSS dựa vào bốn chế độ bố cục chính.

  1. Block Layout: Được sử dụng để cấu trúc các phần của trang web (ví dụ: <div>, <p>).
  2. Inline Layout: Được sử dụng cho văn bản và các phần tử nội tuyến (ví dụ: <span>, <a>).
  3. Table Layout: Được sử dụng để hiển thị dữ liệu dạng bảng trong lưới hai chiều (ví dụ: <table>, <tr>).
  4. Positioned Layout: Được sử dụng để định vị các phần tử một cách rõ ràng (ví dụ: position: absolute, position: relative).

Why Use Flexbox?

Flexbox giúp đơn giản hóa việc tạo bố cục linh hoạt và đáp ứng. Nó căn chỉnh và tạo khoảng cách các phần tử một cách linh động. Điều này giúp giảm nhu cầu về CSS phức tạp hoặc markup bổ sung.

  • Responsive Design: Điều chỉnh bố cục liền mạch với các kích thước màn hình khác nhau.
  • Ease of Use: Đơn giản hóa việc căn chỉnh và tạo khoảng cách với code tối thiểu.
  • Dynamic Sizing: Tự động điều chỉnh kích thước các phần tử cho vừa với không gian có sẵn.
  • Efficient Layouts: Hoàn hảo cho các thiết kế hiện đại, rõ ràng và dễ bảo trì.

Flex Properties

Đây là danh sách các thuộc tính CSS Flexbox chính:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

. flex-direction

Thuộc tính flex-direction được sử dụng để xác định hướng của một phần tử linh hoạt. Trục mặc định là ngang trong Flexbox nên các phần tử nằm trên một hàng.

html 
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            gap: 10px;
        }

        .item {
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>
  • display: flex: Bật bố cục Flexbox cho .container để sắp xếp các phần tử con.
  • flex-direction: row: Căn chỉnh các phần tử theo hàng ngang (hành vi mặc định).
  • gap: 10px: Thêm khoảng cách 10 pixel giữa các phần tử flex để có khoảng cách tốt hơn.

. flex-wrap

Thuộc tính flex-wrap property được dùng để xác định cách các flex-item xuống hàng. Nếu thuộc tính flex-wrap được đặt thành wrap trình duyệt sẽ đặt hộp. Nếu cửa sổ trình duyệt nhỏ hơn các phần tử thì các phần tử sẽ xuống dòng tiếp theo.

html 
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            background-color: lightgray;
            padding: 10px;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>
  • flex-wrap: wrap: Đảm bảo các phần tử di chuyển xuống dòng tiếp theo khi chúng vượt quá chiều rộng vùng chứa.
  • .item styling: Mỗi hộp có kích thước cố định và căn giữa văn bản để có bố cục rõ ràng.

. justify-content

Thuộc tính justify-content property được sử dụng để căn chỉnh các phần tử flex theo trục chính. Vị trí này nằm trong một vùng chứa flexbox.


html 
<html>
<head>
    <style>
        .container {
            display: flex;
            justify-content: center;
            background-color: lightgray;
            padding: 10px;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>
  • justify-content: center: Căn giữa các phần tử theo chiều ngang bên trong vùng chứa.
  • .item styling: Mỗi phần tử được tạo kiểu để duy trì kích thước và căn chỉnh rõ ràng.

. align-items

CSS align-items được sử dụng để căn chỉnh các phần tử flex theo chiều dọc theo trục ngang.

html 
<html>
<head>
    <style>
        .container {
            display: flex;
            align-items: center;
            height: 200px;
            background-color: lightgray;
        }

        .item {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>
  • align-items: center: Căn giữa các phần tử theo chiều dọc trong vùng chứa.
  • .item styling: Đảm bảo kích thước và căn chỉnh nhất quán cho phần tử.

.align-content

Align-content xác định cách mỗi dòng flex được căn chỉnh trong flexbox. Thuộc tính này chỉ áp dụng nếu flex-wrap: wrap được áp dụng. Tức là khi có nhiều dòng phần tử flexbox.


html 
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
            height: 300px;
            background-color: lightgray;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: lightpink;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>
  • align-content: space-between: Phân phối các dòng đều nhau với khoảng cách ở giữa.
  • .item styling: Cung cấp cái nhìn trực quan về cách các phần tử căn chỉnh trên nhiều dòng.

Best Practices for Advanced CSS Layouts with Flexbox:

  • Sử dụng display: flex để tạo các vùng chứa linh hoạt.
  • Áp dụng flex-direction tđể đặt hướng trục chính.
  • Sử dụng justify-content để căn chỉnh các phần tử dọc theo trục chính.

Last Updated : 21/07/2025