Lưới CSS hoặc Flexbox: Cái nào tốt hơn để tạo cột?
Khi nói đến bố cục CSS, hai công cụ chính mà bạn có thể sử dụng là Grid và Flexbox. Mặc dù cả hai đều tuyệt vời trong việc tạo bố cục, nhưng chúng phục vụ các mục đích khác nhau và có điểm mạnh và điểm yếu khác nhau.
Đạt được sự hiểu biết về các hành vi riêng biệt được thể hiện bằng từng phương pháp bố trí, cũng như các trường hợp mà chúng nên được sử dụng.
Hành vi khác nhau của CSS Flexbox và Grid
Quá trình nói trên có thể được truyền đạt một cách hiệu quả bằng cách tạo tệp index.html trong thư mục đã chọn của một người và kết hợp đoạn mã tiếp theo vào đó:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Flexbox vs Grid</h1>
<h2>Flexbox:</h2>
<div class="flex-container">
<div>Lorem.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
</div>
<h2>Grid:</h2>
<div class="grid-container">
<div>Lorem.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
</div>
</body>
</html>
Cả hai bộ phận đều bao gồm những đứa con giống hệt nhau, do đó cho phép thực hiện các phương pháp riêng biệt trong mỗi bộ phận và tạo điều kiện thuận lợi cho việc so sánh chúng.
Bạn có thể nhận thấy rằng HTML bao gồm một tài liệu văn bản được tạo kiểu được gọi là “style.css”. Xây dựng tệp cụ thể này trong cùng thư mục với “index.html” và chèn các thiết kế tiếp theo vào bên trong nó:
body {
padding: 30px;
}
h1 {
color: #A52A2A;
}
h2 {
font-size: large;
}
div:not([class]) {
outline: 2px solid black;
padding: 0.5em;
}
Trang của bạn sẽ trông như thế này:
Để chuyển đổi phần tử div ban đầu thành một cột linh hoạt trong tệp CSS của một người, tất cả những gì cần thiết là kết hợp đánh dấu được cung cấp vào biểu định kiểu. Điều này sẽ thay đổi bố cục của phần tử div đầu tiên một cách hiệu quả bằng cách sử dụng các thuộc tính và thuộc tính được liên kết với thuộc tính CSS display và flex.
.flex-container {
display: flex;
}
Đây là kết quả:
Vùng chứa linh hoạt sử dụng chiến lược bố cục được gọi là flexbox, sắp xếp các phần tử con của nó theo hàng hoặc cột ngang có thể tự động điều chỉnh để phù hợp với kích thước của khu vực xem. Khả năng thay đổi kích thước này là nền tảng để hiểu các nguyên tắc của flexbox, tạo cơ sở cho tiện ích của nó trong thiết kế web.
Để giảm thiểu các sự cố tiềm ẩn với các cột tràn trong vùng chứa linh hoạt, bạn nên sử dụng thuộc tính flex-wrap .
.flex-container {
display: flex;
flex-wrap: wrap;
}
Thuộc tính CSS flexbox mới cho phép sử dụng không gian hiệu quả hơn bằng cách cho phép các phần tử con chảy trên nhiều dòng khi cần thiết, thay vì khiến chúng bị tràn hoặc bị cắt bớt như trong các phiên bản trước. Điều này đạt được thông qua việc triển khai một thùng chứa linh hoạt với không gian trống sẵn có được tính toán dựa trên kích thước của nó, sau đó có thể phân bổ cho các phần tử con của nó theo kích thước tương ứng và mức độ ưu tiên được đặt bằng cách sử dụng’flex-grow’,‘flex-shrink’và các thuộc tính’cơ sở linh hoạt’. Bằng cách cho phép các phần tử con này bao quanh và tiếp tục trên các dòng tiếp theo khi không gian sẵn có không đủ để tất cả chúng xuất hiện trên một hàng, tính năng này giúp tối ưu hóa bố cục và tránh các vấn đề thiết kế tiềm ẩn có thể phát sinh do hạn chế về chiều rộng cố định.
Để đạt được bố cục dựa trên lưới cho phần tử thứ hai, người ta có thể sử dụng các quy tắc CSS sau:css.grid {display: Grid;grid-template-columns: Repeat(auto-fill, minmax(200px, 1fr)); Grid-gap: 5px;}Màn hình : lưới; Quy tắc áp dụng mô hình bố cục “lưới” cho lớp .grid , cho phép chúng ta xác định các hàng và cột trong đó. Thuộc tính grid-template-columns chỉ định rằng chúng ta muốn tạo một lưới tự động điền với chiều rộng tối thiểu là 200 pixel và chiều rộng tối đa là 1 phân số (có nghĩa là mỗi cột chiếm nhiều không gian nếu cần). Cuối cùng, thuộc tính grid-gap
.grid-container {
display: grid;
}
Chỉ riêng tuyên bố nói trên không tạo ra bất kỳ ảnh hưởng nào vì hoạt động tiêu chuẩn của Lưới dẫn đến các thành phần cấu thành của nó được sắp xếp theo chiều dọc chồng lên nhau theo mặc định.
Để chuyển từ bố cục hàng sang bố cục cột, cần phải sửa đổi giá trị của thuộc tính grid-auto-flow, mặc định là row . Bằng cách thay đổi thuộc tính này thành cột, các mục lưới sẽ được hiển thị theo cột dọc thay vì hàng ngang.
.grid-container {
display: grid;
grid-auto-flow: column;
}
Bây giờ đây là kết quả:
Để chỉ định chính xác số lượng cột mong muốn trên mỗi hàng trong bố cục lưới, hãy sử dụng thuộc tính “grid-template-columns” trong CSS.
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Để đạt được bố cục có nhiều cột có chiều rộng bằng nhau hoạt động tương tự như Flexbox khi gói nội dung, người ta có thể sử dụng các thuộc tính thiết kế đáp ứng như “auto-fit”, “min-content” và “max-content”.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Flexbox và Grid đôi khi được mô tả lần lượt là hệ thống bố cục một chiều và hai chiều; tuy nhiên sự phân loại này là một sự đơn giản hóa quá mức vì cả Flexbox và Grid đều có khả năng tạo bố cục hai chiều bất chấp sự khác biệt về cách tiếp cận và những hạn chế của chúng.
Thật vậy, việc điều chỉnh kích thước đơn lẻ của sự sắp xếp là điều tối quan trọng. Ví dụ: hãy tính đến hình minh họa đã nói ở trên:
Thật vậy, tính nhất quán của cột Lưới là đáng chú ý khi so sánh với sự thay đổi được quan sát trong các hàng/cột Flexbox. Điều quan trọng là phải nhận ra rằng mỗi hàng/cột riêng lẻ trong một thùng chứa linh hoạt hoạt động độc lập với nhau, dẫn đến sự khác biệt tiềm ẩn về kích thước dựa trên nội dung mà chúng chứa. Do đó, những phần tử này có thể được coi là các khối riêng biệt hơn là các cột truyền thống.
Lưới hoạt động rõ ràng bằng cách thiết lập một mảng hai chiều trong đó các cột được đặt trước để cố định. Ví dụ: một phần tử bao gồm nội dung ngắn gọn sẽ thể hiện các kích thước phù hợp với một phần tử khác có văn bản mở rộng, như được minh họa trong mô tả kèm theo.
Về bản chất, CSS Grid cung cấp một cách tiếp cận có tổ chức hơn để thiết kế bố cục so với flexbox, mang lại khả năng thích ứng và phản hồi cao hơn trong việc tạo giao diện người dùng động. Biệt danh của hai hệ thống bố cục nổi bật này không thể phù hợp hơn.
Khi nào nên sử dụng Flexbox
Bạn muốn sử dụng các kích thước vốn có của các cột và hàng riêng lẻ dựa trên nội dung của chúng hay thực hiện kiểm soát có cấu trúc đối với chúng theo quan điểm của phần tử gốc? Nếu bạn chọn cách trước, Flexbox sẽ đưa ra một giải pháp lý tưởng.
Để minh họa khái niệm này, chúng ta hãy xem xét một kịch bản giả định trong đó chúng ta có một thanh điều hướng được căn chỉnh theo chiều ngang nằm trong các thẻ HTML mở và đóng. Mã được cập nhật sẽ giống như sau:
<h1>Flexbox vs. Grid</h1>
<header class="flex">
<h2>Flexbox</h2>
<nav>
<ul class="nav-list">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Service Information Goes Here</a></li>
<li><a href="">Blog Contact</a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>
<header class="grid">
<h2>Grid</h2>
<nav>
<ul class="nav-list">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Service Information Goes Here</a></li>
<li><a href="">Blog Contact</a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>
Sửa đổi nội dung trong biểu định kiểu xếp tầng bằng cách sử dụng đoạn mã được cung cấp để thay thế cho bất kỳ đánh dấu hiện có nào.
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}
header {
--border-width: 5px;
border: var(--border-width) solid black;
margin-bottom: 30px;
}
header > *:first-child {
border: var(--border-width) solid #FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid #90EE90;
}
Đây là kết quả:
Để tạo điều hướng linh hoạt với các mục menu đầu tiên được xếp theo chiều dọc trên màn hình nhỏ hơn và được hiển thị dưới dạng hai cột có chiều rộng bằng nhau trên màn hình lớn hơn bằng CSS Grid, hãy thêm mã sau vào biểu định kiểu của bạn:css/* Màn hình nhỏ/@media (độ rộng tối đa): 768px) {.container {display: flex;justify-content: space-between;}}/Màn hình lớn hơn */@media (min-width: 769px) {.container {display: Grid;grid-template-columns: lặp lại (2, auto);gap: 10px;}}Và đối với mục menu thứ hai theo kiểu danh sách, bạn có thể sử dụng tương tự
.flex .nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid .nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Xác định hiệu quả của từng phương pháp bằng cách so sánh kết quả của chúng:
Thật vậy, cách trình bày trực quan minh họa cách Flexbox đáp ứng yêu cầu sắp xếp các phần tử cạnh nhau trong khi vẫn giữ được kích thước tự nhiên của chúng. Ngược lại, Grid, với kích thước ô được xác định trước, có thể không mang lại giao diện tối ưu khi áp dụng cho các liên kết văn bản thuần túy.
Khi nào nên sử dụng lưới CSS
Lưới cung cấp một lợi thế khác biệt trong các tình huống mong muốn có cấu trúc cố định cho các phần tử con trong vùng chứa chính của chúng. Ví dụ: việc sắp xếp một loạt thẻ có chiều rộng đồng đều, bất kể kích thước nội dung khác nhau của chúng, có thể đạt được hiệu quả thông qua Grid.
Thay thế đánh dấu trong thẻ bằng đoạn mã được cung cấp, đoạn mã này chứa một loạt hướng dẫn để tạo và tạo kiểu cho các trang web bằng HTML và CSS.
<h1>Flexbox vs. Grids</h1>
<section class="cards">
<h2>Some cards</h2>
<div class="columns">
<article class="card">
<h3 class="card__title">Fun Stuff</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>
<article class="card">
<h3 class="card__title">Fun Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>
<article class="card">
<h3 class="card__title">A Longer Title Than Others</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!</p>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>
</div>
</section>
Thêm CSS này:
.columns {
display: flex;
gap: 1em;
}
article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Bản trình diễn ban đầu sử dụng bố cục Flexbox để so sánh trực quan với Bố cục lưới. Kết quả hiển thị như sau:
Thật vậy, điều đáng chú ý là cột cuối cùng có kích thước lớn hơn do số đo vốn có của nó, điều mà hệ thống bố cục Flexbox quản lý một cách hiệu quả. Tuy nhiên, để hiển thị tất cả các cột có chiều rộng đồng đều bằng Flexbox, người ta phải ghi đè phép đo vốn có này bằng cách sử dụng phương pháp sau:
.columns > * {
flex: 1;
}
Bố cục lưới là một giải pháp hiệu quả khi cần có sự sắp xếp cụ thể của các phần tử. Bằng cách chỉ định số lượng cột, người ta có thể dễ dàng đạt được sự căn chỉnh mong muốn mà không cần sử dụng các kiểu CSS hoặc thao tác JavaScript phức tạp.
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Đây là kết quả:
Việc sử dụng Grid theo cách này mang lại một lợi ích bổ sung vì nó cho phép cha mẹ duy trì quyền kiểm soát cách bố trí của con mình. Điều này có nghĩa là các phần tử con mới hoặc bị loại bỏ sẽ không phá vỡ cấu trúc tổng thể.
Vậy Khi Nào Bạn Nên Sử Dụng Grid hay Flexbox?
Phiên bản tiếng Anh nâng cao:Bố cục lưới cung cấp cấu trúc được tổ chức tốt cho phần tử gốc, cung cấp độ rộng cột nhất quán mà vẫn thống nhất trên các kích thước nội dung khác nhau.
Flexbox cung cấp một bố cục có khả năng thích ứng dựa trên kích thước vốn có của các thành phần, khiến nó rất phù hợp cho các tình huống mà tính linh hoạt và khả năng phản hồi là tối quan trọng.