CSS: Sự khác nhau giữa Flexbox và Grid

Nếu bạn đã từng sử dụng những thuộc tính như float hay position để sắp xếp bố cục các thành phần trên trang web, bạn sẽ thấy chúng có khá nhiều hạn chế. Ví dụ như thuộc tính float có thể gây ra nhiều vấn đề về bố cục nếu không xác định rõ được kích thước của các phần tử.

Việc sử dụng các thuộc tính trên sẽ khiến chúng ta phải viết rất nhiều code CSS mà tính linh hoạt của bố cục lại không cao. Chính vì thế mà flexbox và grid ra đời, nhằm đem đến cách sắp xếp bố cục linh hoạt và hiệu quả hơn trên nhiều kích thước màn hình khác nhau.

Để có thể hiểu Flexbox và Grid là gì, bạn cần nắm được khái niệm HTML, CSS cơ bản. 200Lab đã có bài viết nói về HTML và CSS là gì, nếu chưa biết thì bạn nên tìm hiểu trước nhé.

1. Flexbox là gì?

1.1 Giới thiệu Flexbox

1.1.1 Khái niệm Flexbox

Flexbox là cách sắp xếp các phần tử theo bố cục một chiều (ngang hoặc dọc), kích thước của các phần tử, vị trí và khoảng cách giữa chúng sẽ tự động được điều chỉnh sao cho phù hợp với bố cục.

1.1.2 Tại sao cần sử dụng Flexbox:

Trước đây, việc sử dụng thuộc tính float và position để sắp xếp bố cục trang web là phổ biến vì chúng có thể hoạt động tốt ở vài trường hợp, tuy nhiên chúng có những giới hạn gây khó chịu như sau:

• Căn giữa theo chiều dọc một khối nội dung trong phần tử cha.
• Làm cho tất cả các phần tử con trong một container chiếm một phần bằng nhau của chiều rộng/chiều cao có sẵn, bất kể chiều rộng/chiều cao có sẵn là bao nhiêu.
• Làm cho tất cả các cột trong một bố cục nhiều cột có cùng chiều cao, ngay cả khi chúng chứa một lượng nội dung khác nhau.

Để giải quyết các vấn đề trên, người ta đã nghĩ ra giải pháp là Flexbox. Nó cho phép bạn dễ dàng căn giữa nội dung theo chiều dọc, phân phối không gian theo cách linh hoạt và tự động điều chỉnh chiều cao của các phần tử trong cùng một hàng.

1.1.3 The Flex model

• Khi một phần tử được định nghĩa thuộc tính display: flex, bản thân nó sẽ trở thành một Flex Container
• Bên trong Flex Container sẽ chứa các Flex Items, tượng trưng cho các phần tử mà chúng ta muốn sắp xếp vị trí của chúng
• Trục chính là trục cùng chiều với các Flex Item được gọi là Main Axis. Nếu các Flex Items nằm ngang thì chiều ngang chính là Main Axis và ngược lại. Điểm đầu và điểm cuối của một Main Axis lần lượt là main start và main end
• Trục phụ là trục ngược chiều với các Flex Items được gọi là Cross Axis. Nếu các Flex Items nằm ngang thì chiều dọc chính là Cross Axis và ngược lại. Điểm đầu và điểm cuối của Cross Axis lần lượt là cross start và cross end.

1.2 Flex Container và Flex Item

Flex Container là phần tử bao ngoài các Flex Item. Để tạo 1 Flex Container, chúng ta set cho phần tử bao ngoài thuộc tính display: flex; hoặc display: inline-flex;. Vậy sự khác nhau giữa display: flex; và display: inline-flex; là gì?

1.2.1 display: flex

• Phần tử sẽ hiển thị như một khối (block-level element) và sẽ chiếm toàn bộ chiều rộng của container cha.
• Các phần tử con sẽ xếp cạnh nhau theo chiều rộng và mặc định là các phần tử con sẽ có chiều rộng bằng nhau, chia đều không gian.

Ví dụ:

1.2.2 display: inline-flex

• Phần tử sẽ hiển thị như một phần tử trên dòng (inline-level element) và chỉ chiếm chiều ngang cần thiết để chứa nội dung của nó.
• Các phần tử con sẽ vẫn xếp cạnh nhau theo chiều ngang, nhưng chúng sẽ không chia đều không gian và sẽ co lại để vừa với nội dung của chúng.

Ví dụ:

1.3 Flex Direction, Main Axis và Cross Axis

1.3.1 Flex Direction

Thuộc tính flex-direction xác định hướng của các Flex Item được sắp xếp bên trong Flex Container. Có 4 giá trị của flex-direction được định nghĩa:

• row (mặc định): Các flex item được sắp xếp theo chiều ngang từ trái sang phải
• row-reverse: Các flex item được sắp xếp theo chiều ngang từ phải sang trái
• column: Các flex item được sắp xếp theo chiều dọc từ trên xuống dưới
• column-reverse: Các flex item được sắp xếp theo chiều dọc từ dưới lên trên

1.3.2 Main Axis

Main Axis (trục chính) là trục theo hướng được xác định bởi thuộc tính flex-direction. Nó là trục theo chiều dọc hoặc chiều ngang do chúng ta định nghĩa giá trị cho thuộc tính flex-direction.

• Nếu flex-direction là row hoặc row-reverse, thì main axis là trục ngang từ trái sang phải.
• Nếu flex-direction là column hoặc column-reverse, thì main axis là trục dọc từ trên xuống dưới.

1.3.3 Cross Axis

Cross Axis (trục phụ) là trục vuông góc với Main Axis.

• Nếu flex-direction là row hoặc row-reverse, thì cross axis là trục dọc từ trên xuống dưới.
• Nếu flex-direction là column hoặc column-reverse, thì cross axis là trục ngang từ trái sang phải.

Hiểu được các khái niệm về Flex Direction, Main Axis hay Cross Axis sẽ giúp chúng ta phối hợp sử dụng các khái niệm trong Flexbox dễ dàng và hiệu quả hơn.

1.4 Flex Basis

Flex Basis dùng để xác định kích thước ban đầu của một phần tử Flex Item.

Khi bạn set giá trị cố định cho flex-basis bằng px hoặc phần trăm (%), bạn đang thiết lập kích thước ban đầu cố định cho Flex Item trên Main Axis. Cùng quan sát ví dụ sau:

Khi chúng ta set flex-basis: 90px cho class box2, phần chiều rộng còn lại sẽ dành cho box1 và box3. Do cả box1 và box3 đều set flex-basis là 100% nên chúng có chiều rộng bằng nhau.

Cùng quan sát thêm ví dụ nữa nhé:

Qua 2 ví dụ trên các bạn thấy được gì? flex-basis chỉ phát huy tác dụng khi bạn sử dụng với nhiều Flex Item trong một Flex Container, nó giúp các Flex Item có thể tự điều chỉnh kích thước sao cho đúng với tỉ lệ mà chúng ta đặt cho nó, và những phần tử nào được set chiều rộng cố định, flex-basis sẽ tính toán chiều rộng cho những phần tử còn lại nằm trong Flex Container đó.

Flex Basis bị ảnh hưởng như thế nào bởi flex-direction?

Giá trị của flex-basis sẽ đè lên thuộc tính width hoặc height của phần tử phụ thuộc vào giá trị của flex-direction. Để hiểu rõ hơn bạn hãy xem ví dụ sau nhé:

See the Pen CSS Flexbox basis by Lâm Hoàng Vũ (@lamhoangvu) on CodePen.

Các bạn có thể thấy khi flex-direction: row, flex-basis sẽ ghi đè lên width của phần tử và tác động theo chiều ngang. Còn khi flex-direction: column, flex-basis sẽ tác động lên width của phần tử theo chiều dọc.

1.5 Flex Grow

Thuộc tính flex-grow dùng để quy định tỷ lệ phát triển của các phần tử con so với nhau khi có không gian dư thừa. Ví dụ nếu tất cả phần tử đều có giá trị flex-grow bằng nhau, chiều rộng của chúng cũng sẽ bằng nhau vì được chia đều.

See the Pen CSS Flex grow by Lâm Hoàng Vũ (@lamhoangvu) on CodePen.

Nếu như không sử dụng thuộc tính flex-grow , chiều rộng của các phần tử sẽ bằng với giá trị của thuộc tính width mà chúng ta đã set. Khi sử dụng flex-grow, chiều rộng các phần tử sẽ được thay đổi sao cho chiếm tối đa chiều rộng của div bao ngoài sau khi đã trừ đi khoảng margin, chiều rộng mới này ghi đè lên thuộc tính width của từng phần tử, dẫn đến kết quả bên trên.

Nếu có một phần tử có giá trị flex-grow cao hơn các phần tử còn lại, chiều rộng của chúng cũng sẽ lớn hơn các phần tử khác.

See the Pen Flex grow 2 by Lâm Hoàng Vũ (@lamhoangvu) on CodePen.

Chiều rộng của phần tử khi sử dụng flex-grow được tính toán như sau:

Giả sử ban đầu chúng ta có 5 phần tử, ta set flex-grow cho 5 phần tử đều bằng 1, vậy lúc này chiều rộng mỗi phần tử sẽ bằng 1/ (tổng chiều rộng) là bằng 1/5 đúng không?

Nhưng nếu chúng ta tăng flex-grow của ô số 3 lên flex-grow: 3, tổng chiều rộng lúc này sẽ bằng 1 + 1 + 3 + 1 + 1 = 7. Vậy là ô số 3 lúc này chiếm 3/7 của container, các ô còn lại chiếm 1/7

1.6 Flex Shrink

Thuộc tính flex-shrink thì ngược lại so với flex-grow, nó không làm phần tử dãn ra mà co lại khi chúng ta thay đổi độ rộng của container giảm xuống.

See the Pen CSS Flexbox shrink by Lâm Hoàng Vũ (@lamhoangvu) on CodePen.

1.7 Justify Content

Thuộc tính justify-content dùng để chỉ định khoảng cách hoặc không gian giữa các phần tử theo Main Axis. Các giá trị của justify-content bao gồm:

• flex-start (mặc định): Các phần tử con được căn chỉnh về phía đầu (bên trái nếu flex-direction là row hoặc bên trên nếu flex-direction là column) của container.
• flex-end: Các phần tử con được căn chỉnh về phía cuối (bên phải nếu flex-direction là row hoặc bên dưới nếu flex-direction là column) của container.
• center: Các phần tử con được căn giữa theo trục chính của container.
• space-between: Các phần tử con được căn đều và cách nhau đều nhau, không có khoảng trống ở đầu và cuối của container.
• space-around: Các phần tử con được căn đều và có khoảng trống đều nhau ở cả hai bên và giữa chúng.
• space-evenly: Các phần tử con được căn đều và có khoảng trống đều nhau, bao gồm cả phần tử ở đầu và cuối container.

Các bạn có thể chỉnh sửa đoạn code sau để hiểu rõ hơn về Justify Content:

See the Pen CSS Flexbox Justify Content by Lâm Hoàng Vũ (@lamhoangvu) on CodePen.

1.8 Align Items

Thuộc tính align-items dùng để chỉ định cách phần tử con căn chỉnh theo Cross Axis bên trong container.

Các giá trị của align-items bao gồm:

• flex-start (mặc định): Các phần tử con được căn chỉnh về phía đầu (bên trên nếu flex-direction là row, bên trái nếu flex-direction là column) của container linh hoạt theo Cross Axis.
• flex-end: Các phần tử con được căn chỉnh về phía cuối (bên dưới nếu flex-direction là row, bên phải nếu flex-direction là column) của container linh hoạt theo Cross Axis.
• center: Các phần tử con được căn giữa theo Cross Axis của container.
• baseline: Các phần tử con được căn chỉnh sao cho dòng chữ cơ bản (baseline) của chúng trùng với dòng chữ cơ bản của container.
• stretch: Các phần tử con sẽ căn chỉnh sao cho chúng kéo dãn để đạt đến kích thước tối đa theo Cross Axis, điều này thường sử dụng khi bạn muốn các phần tử con động theo chiều cao hoặc chiều rộng của container.

Các bạn có thể chỉnh sửa đoạn code sau để hiểu rõ hơn về Align Items:

See the Pen Untitled by Lâm Hoàng Vũ (@lamhoangvu) on CodePen.

1.9 Align Self

Thuộc tính align-self khá giống với align-items, cũng là dùng để chỉ định cách phần tử con căn chỉnh theo Cross Axis bên trong container. Tuy nhiên khác với align-items là áp dụng với tất cả phần tử con nằm trong container, align-self chỉ áp dụng với phần tử đơn lẻ trong container.

Các giá trị của align-self bao gồm:

• flex-start: Phần tử con được căn chỉnh về phía đầu của container theo Cross Axis.
• flex-end: Phần tử con được căn chỉnh về phía cuối của container theo Cross Axis.
• center: Phần tử con được căn giữa theo Cross Axis.
• baseline: Phần tử con được căn chỉnh sao cho dòng chữ cơ bản (baseline) của nó trùng với baseline của container.
• stretch (mặc định): Phần tử con sẽ căn chỉnh sao cho nó kéo dãn để đạt đến kích thước tối đa theo Cross Axis.

See the Pen CSS Align Self by Lâm Hoàng Vũ (@lamhoangvu) on CodePen.

1.10 Khi nào nên sử dụng Flexbox?

1.10.1 Sắp xếp các phần tử theo hàng hoặc cột

Flexbox rất mạnh mẽ khi bạn muốn sắp xếp hoặc căn chỉnh các phần tử con bên trong một container chính theo Main Axis. Điều này thường gặp ở các thành phần trong trang web phổ biến như: menu dọc, thanh điều hướng,...

1.10.2 Tương thích với nhiều kích thước màn hình

Flexbox rất thích hợp cho việc xử lý giao diện Responsive, trong thực tế có rất nhiều thành phần trong website sử dụng flexbox để đáp ứng giao diện Responsive:

• Navigation Bar:

See the Pen Untitled by Lâm Hoàng Vũ (@lamhoangvu) on CodePen.

Như ở ví dụ bên trên, khi được xem ở màn hình desktop, các menu item trong thanh navbar sẽ nằm ngang trong container. Nhưng khi được xem ở màn hình nhỏ hơn 768px, các menu item sẽ nằm dọc.

• Item layouts

See the Pen CSS Flexbox: Item layouts by Lâm Hoàng Vũ (@lamhoangvu) on CodePen.

Trong ví dụ này, các phần tử con sẽ thay đổi từ việc hiển thị 3 cột trên màn hình lớn thành hiển thị 2 cột khi màn hình thu nhỏ xuống dưới 768px.

2. Grid là gì?

2.1 Giới thiệu Grid

2.1.1 Khái niệm Grid

Grid là cách thức để xây dựng hệ thống layout theo hai chiều ngang và dọc. Ý tưởng chính của Grid là chia webpage thành nhiều cột và hàng, từ đó có thể tuỳ chỉnh vị trí và kích thước của phần tử bất kì nằm bên trong webpage theo ý muốn.

2.1.2 Tại sao chúng ta cần sử dụng Grid

Trong khi Flexbox chỉ sắp xếp được bố cục theo một chiều ở một thời điểm (ngang hoặc dọc), thì grid có thể sắp xếp được bố cục theo cả hai chiều. Grid sinh ra nhằm xử lý nhiều giao diện phức tạp hơn và đi sâu vào tuỳ chỉnh từng vùng của giao diện.

2.1.3 Các thuật ngữ hay dùng trong Grid

Grid Container

Khi một phần tử được khai báo thuộc tính display: grid hoặc display: inline-grid, phần tử đó sẽ trở thành một Grid Container.

Đoạn code sau mô tả cách khai báo một Grid Container cơ bản:

See the Pen Grid Container by Lâm Hoàng Vũ (@lamhoangvu) on CodePen.

Nằm trong Grid Container là các Grid Items.

Grid Tracks

Mỗi một hàng hay mỗi một cột bên trong Grid Container được gọi là một Grid Tracks, Grid Tracks có thể được điều chỉnh thông qua thuộc tính grid-template-columns hay grid-template-rows mà chúng ta sẽ cùng nhau tìm hiểu ở mục bên dưới.

Grid Lines

Hai bên lề trái và phải, trên và dưới của một Grid Tracks được gọi là Grid Lines. Grid Lines sẽ được tính bắt đầu từ 1 cho đến n.

Grid Cell

Các Grid Lines giao nhau tạo thành các ô hay còn gọi là Grid Cell. Đây là đơn vị nhỏ nhất nằm trong Grid.

Grid Area

Là một vùng hình chữ vuông hoặc hình chữ nhật được ghép bởi nhiều Grid Cell. Grid Area được khai báo dựa trên thuộc tính grid-template-areas

2.2 Grid Template Columns và Grid Template Rows

Thuộc tính grid-template-columns và grid-template-rows dùng để khai báo kích thước của các Grid Item và số lượng cột hay số lượng hàng mà Grid Item chiếm.

Ví dụ với đoạn code sau:

.container {
  display: grid;
  grid-template-columns: 200px 100px 200px;
  grid-template-rows: 100px 200px;
}

Đoạn code được hiểu như sau: Tạo ra một Grid Container có 3 cột và 2 hàng, cột thứ nhất và cột thứ 3 sẽ chiếm 200px, cột thứ 2 chiếm 100px. Tương tự với hàng thứ nhất chiếm 100px và hàng thứ 2 chiếm 200px.

Ngoài sử dụng px thì Grid còn cung cấp thêm cho chúng ta thêm một đơn vị là fr

fr là viết tắt của từ fraction, được sử dụng khi ta muốn định nghĩa cho các Grid Items một độ dài tương đối. Khi sử dụng fr, chiều rộng của các phần tử sẽ bằng nhau và phụ thuộc vào kích thước cũng như số lượng phần tử có bên trong Grid Container.

Đoạn code trên có thể sửa thành:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 200px;
}

Kết quả ta được như sau:

Nếu việc viết lặp đi lặp lại giá trị ở  grid-template-columns khiến bạn mệt mỏi thì Grid đã cung cấp sẵn cho chúng ta ký hiệu là repeat.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 200px;
}

Đoạn code trên được hiểu là lặp lại giá trị 1fr 3 lần.

2.3 Grid Auto Rows và Grid Auto Columns

Thuộc tính grid-auto-rows trong Grid được sử dụng để xác định chiều cao mặc định cho các hàng không được xác định trước trong Grid. Nó quy định chiều cao của các hàng một cách tự động khi ta không khai báo thuộc tính grid-template-rows và sẽ được áp dụng cho tất cả các hàng.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}

Đoạn code trên sẽ cho ra kết quả sau:

Tương tự đối với Grid Auto Colums cũng như vậy.

Ngoài ra, Grid còn cung cấp cho chúng ta thêm một ký hiệu rất hữu ích là minmax. Ký hiệu này giúp ta gán giá trị chiều rộng mặc định cho các phần tử có nội dung nhỏ hơn giá trị mà chúng ta gán, đồng thời tự động quy định chiều rộng cho các phần tử có nội dung lớn hơn giá trị mặc định.

Điều này giúp cho giao diện của chúng ta không bị vỡ hay ẩn đi khi nội dung của một Grid Item nào đấy vượt quá chiều rộng cho phép.

Để sử dụng mimax ta có thể viết như sau:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: mimax(60px, auto);
}

Kết quả:

Ở đây 60px là chiều rộng mặc định của tất cả các Grid Item, khi có bất kỳ item nào nó nội dung vượt quá 60px, nó sẽ tự động được kéo dài ra sao cho vừa đúng với chiều rộng của nội dung bên trong. Trong trường hợp này nó là 75.60px.

2.4 Grid Column Start và Grid Column End

Hai thuộc tính grid-column-start và grid-column-end dùng để quy định điểm bắt đầu và điểm kết thúc của một Grid Item trên một hàng dựa vào các Grid Lines.

Giả sử chúng ta muốn quy định điểm bắt đầu của Grid Item số 5 sẽ bắt đầu từ cột số 2 đến cột số 4 ta làm như sau:

.item-5 {
  grid-column-start: 2;
  grid-column-end: 4;
}

Kết quả thu được:

2.5 Grid Row Start và Grid Row End

Hai thuộc tính grid-row-start và grid-row-end cũng tương tự. Vẫn là item số 5 chúng ta cho điểm bắt đầu của nó là từ hàng số 2 đến hàng số 4.

.item-5 {
  grid-column-start: 2;
  grid-column-end: 4;
  
  grid-row-start: 2;
  grid-row-end: 4;
}

Kết quả thu được:

2.6 Grid Column và Grid Row

Để viết các thuộc tính grid-column-start / end và grid-row-start / end được ngắn gọn hơn, chúng ta có thể sử dụng grid-column và grid-row

.item-5 {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}

2.7 Grid Template Area và Grid Area

Thuộc tính grid-template-areas dùng để định nghĩa trước một mẫu vùng (area), các Grid Item có thể sử dụng các tên vùng được định nghĩa từ trước này thông qua thuộc tính grid-area.

.container {
    display: grid;
    grid-template-areas: 
        "aa aa bb"
        "aa aa bb"
}

.item-5 {
    grid-area: aa;
}

.item-4 {
	grid-area: bb;
}

Kết quả của đoạn code bên trên sẽ là:

2.8 Khi nào nên sử dụng Grid

2.8.1 Xây dựng giao diện với cấu trúc phức tạp

Việc có thể tuỳ chỉnh giao diện theo hai chiều cả hàng và cột giúp cho Grid rất mạnh mẽ trong việc giải quyết các giao diện phức tạp. Đặc biệt với những container có chứa rất nhiều item và ta cần sắp xếp các item ở các vị trí khác nhau nhưng vẫn đảm bảo tính linh hoạt và thẩm mỹ.

2.8.2 Đáp ứng linh hoạt mọi tỉ lệ màn hình

Với thế mạnh là xử lý được nhiều giao diện phức tạp theo hai chiều cộng với được trang bị sẵn nhiều ký hiệu mạnh mẽ như repeat, mimax hay đơn vị fr, Grid có thể đáp ứng tốt gần như mọi tỉ lệ màn hình phổ biến như Desktop, Tablet hay Mobile.

3. Browser Support

Hiện tại cả Flexbox và Grid đã được hỗ trợ tốt ở hầu hết các trình duyệt phổ biến hiện nay như Chrome, Firefox, MS Edge,... Tuy nhiên cả hai vẫn còn nhiều hạn chế và hoạt động chưa tốt trên Internet Explorer do Microsoft đã cho dừng phát triển trình duyệt này từ 2022.

Các bạn có thể tham khảo bảng thống kê các phiên bản trình duyệt hỗ trợ Flexbox dưới đây.

Còn dưới đây là bảng thống kê của Grid.

4. So sánh Flexbox với Grid

Giống nhau:

• Layout: Cả Flexbox và Grid đều cho phép bạn tạo ra các bố cục (layouts) trên trang web. Chúng giúp bạn quản lý cách các phần tử hiển thị và sắp xếp trên màn hình.
• Phân chia không gian: Cả hai công cụ đều cho phép bạn phân chia không gian trên trang web thành các vùng hoặc khu vực để đặt các phần tử con.
• Kiểm soát vị trí và kích thước của các phần tử con: Cả Flexbox và Grid đều cho phép bạn dễ dàng kiểm soát cách các phần tử con bên trong container được sắp xếp và căn chỉnh.
• Tạo ra Responsive Layout: Cả Flexbox và Grid Layout đều có thể được sử dụng để tạo ra bố cục Resposive tương thích trên nhiều kích thước màn hình và thiết bị khác nhau.

Khác nhau:

Bảng so sánh

5. Kết luận

Flexbox và Grid đều có tính chất và ứng dụng riêng biệt. Thường thì bạn sẽ sử dụng cả Flexbox và Grid trong một dự án để kết hợp sức mạnh của chúng và đáp ứng giao diện linh hoạt hơn.

6. Tài liệu tham khảo

1. Basic concepts of CSS Grid trên MDN
2. A complete Guide to CSS Grid - CSS Tricks
3. In-depth introduction to Flexbox - Trustbit