Sự khác biệt giữa CSS Grid và CSS Flexbox

Kun cute

Nhắc tới bố cục CSS, bạn có hai công cụ chính là Grid và Flexbox. Cả hai đều có tác dụng tạo bố cục nhưng chúng có mục đích sử dụng với điểm mạnh và yếu khác nhau. Hãy cùng Quantrimang.com tìm hiểu sự khác biệt giữa CSS Grid và CSS Flexbox nhé.

So sánh CSS Grid và Flex box

CSS Grid Layout là một hệ thống bố cục dựa trên dạng kẻ ô hai chiều với các hàng và cột, khiến cho việc thiết kế trang web dễ dàng hơn mà không cần phải dùng float và định vị vị trí. Giống như bảng, bố cục lưới cho phép nhà thiết kế căn chỉnh các thành phần vào cột và hàng.

Để bắt đầu, bạn phải xác định một thành phần container dưới dạng lưới bằng display:grid, đặt kích thước cột và hàng bằng grid-template-columns và grid-template-rows, sau đó đưa thành phần con của nó vào khung kẻ ô bằng grid-column và grid-row.

Ví dụ:


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .main{
            display: grid;
            grid: auto auto / auto auto auto auto;
            grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }
        .gfg {
            background-color: rgb(255, 255, 255);
            text-align: center;
            padding: 25px 0;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h2 style="text-align: center;">
          Welcome To Quantrimang.com
      </h2>
    <div class="main">
        <div class="gfg">Home</div>
        <div class="gfg">Read</div>
        <div class="gfg">Write</div>
        <div class="gfg">About Us</div>
        <div class="gfg">Contact Us</div>
        <div class="gfg">Privacy Policy</div>
    </div>
</body>
</html>

Bố cục grid

CSS Flexbox cung cấp bố cục một chiều. Nó hữu ích trong việc phân bổ và sắp xếp không gian giữa các mục trong một container. Nó hoạt động với tất cả các loại thiết bị hiển thị và kích thước màn hình.

Để bắt đầu, bạn phải xác định một thành phần container dưới dạng kẻ ô bằng display: flex;

Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .main{
            display: flex;
            grid: auto auto / auto auto auto auto;
            grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }
        .gfg {
            background-color: rgb(255, 255, 255);
            text-align: center;
            padding: 25px 0;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h2 style="text-align: center;">
          Welcome To Quantrimang.com
      </h2>
    <div class="main">
        <div class="gfg">Home</div>
        <div class="gfg">Read</div>
        <div class="gfg">Write</div>
        <div class="gfg">About Us</div>
        <div class="gfg">Contact Us</div>
        <div class="gfg">Privacy Policy</div>
    </div>
</body>
</html>

Kế quả dùng CSS Flex

Điểm độc đáo của Grid và Flexbox trong CSS

Một và hai chiều

Grid dành cho bố cục hai chiều, còn Flexbox là một chiều. Điều này có nghĩa Flexbox có thể hoạt động trên cả hàng và cột cùng lúc, nhưng Grid có thể hoạt động với cả hai.
Flexbox cho bạn sự linh hoạt hơn trong khi hoạt động trên một trong hai phần tử hàng hoặc cột. Markup HTML và CSS dễ dàng quản lý trường hợp này.
Grid cho bạn sự linh hoạt hơn trong việc di chuyển xung quanh các khối mà không cần quan tâm tới markup HTML.

Nội dung trước và bố cục trước

Flexbox hoạt động trên nội dung, còn Grid hoạt động trên bố cục.
Bố cục Flexbox là lựa chọn phù hợp nhất cho các thành phần ứng dụng và bố cục quy mô nhỏ, còn bố cục Grid được thiết kế cho bố cục quy mô lớn hơn mà không có thiết kế tuyến tính.

Sự khác biệt giữa Grid và Flexbox

Kích thước và tính linh hoạt

Flexbox cung cấp quyền kiểm soát lớn hơn cho việc căn chỉnh và phần bổ khoảng cách giữa các mục. Với giới hạn một chiều, Flexbox chỉ xử lý cột hoặc hàng.
Grid có khả năng bố cục hai chiều, cho phép chiều rộng linh hoạt dưới dạng đơn vị chiều dài. Điều này bù đắp cho những hạn chế trong Flex.

Căn chỉnh

Flex Direction cho phép lập trình viên căn chỉnh các phần tử theo chiều dọc hoặc ngang, thường được dùng khi lập trình viên tạo và đảo ngược hàng hoặc cột.
CSS Grid triển khai các đơn vị đo theo phân số cho tính linh hoạt của kẻ ô và từ khóa tự động để tự động điều chỉnh cột hoặc hàng.

Quản lý mục

Flex Container là thành phần cha, còn Flex Item đại diện cho thành phần con. Flex Container có thể đảm bảo trình bày cân bằng bằng cách điều chỉnh kích thước mục. Điều này cho phép lập trình viên thiết kế phù hợp cho các màn hình dao động.
Grid hỗ trợ cả nội dung ẩn và rõ ràng. Tính năng tự động hóa sẵn có của nó cho phép nó tự động mở rộng các mục hàng và sao chép giá trị vào sản phẩm mới từ mục trước đó.

Thuộc tính	Grid	Flexbox
Kích thước	Hai chiều	Một chiều
Tính năng	Có thể kết hợp linh hoạt các mục qua tính năng space-occupying	Có thể đẩy nội dung sang căn chỉnh tối đa
Kiểu hỗ trợ	Bố cục đầu tiên	Nội dung đầu tiên