Một trong những việc developer phải làm là xác định cách tiếp cận vấn đề khi nhận project mới. Khi làm website responsive, thường phải chọn giữa CSS Grid và CSS Flexbox để layout. Bài này phân tích khác biệt giữa Grid và Flexbox, và khi nào nên chọn cái nào.
Flexbox – Tổng Quan
CSS Flexbox về cơ bản là một box model responsive. Cho phép định vị tốt hơn trong container và khá dễ implement miễn là bạn hiểu khả năng của nó.
Flexible box model vẫn dùng tất cả thuộc tính box model để control margin, padding, border, content. Khi set display: flex trên parent container, nó mở ra tất cả flex properties cho các children của parent đó.
Một Số Thuộc Tính Flexbox:
- flex-direction: column | row* | column-reverse | row-reverse
- flex-wrap: wrap | nowrap* | wrap-reverse
- flex-flow: shorthand cho 2 thuộc tính đầu – format
flex-flow: <flex-direction> <flex-wrap>; - justify-content: căn chỉnh items theo main axis. Khi flex-direction là row, main axis là trục ngang. Khi column, main axis là trục dọc.
- justify-content: flex-start* | flex-end | center | space-evenly | space-around | space-between
- align-items: căn chỉnh items theo axis đối diện main axis. Khi flex-direction là column, đó là trục ngang. Khi row, là trục dọc.
- align-items: stretch* | center | flex-start | flex-end | baseline
- align-self: dùng trên flex items có parent
display: flex. Control alignment trong flex container.- align-self: auto* | stretch | center | flex-start | flex-end | baseline
* – giá trị mặc định của property
CSS Grid – Tổng Quan
CSS Grid là layout model khác. Hơi mới hơn Flexbox, nên browser support chưa rộng bằng Flexbox. Cho phép tạo layout 2D với cột và hàng, định vị tỉ mỉ. Khi set display: grid trên parent, có thể dùng các grid properties phổ biến.
Một Số Thuộc Tính CSS Grid:
- grid-gap, grid-column-gap, grid-row-gap: set spacing. Grid-gap là shorthand cho cả column và row gap.
- grid-template-columns, grid-template-rows: format cơ bản container trong grid – độ rộng cột, chiều cao hàng, số container mỗi hàng, v.v.
- justify-content: căn chỉnh toàn bộ grid theo chiều ngang.
- align-content: căn chỉnh toàn bộ grid theo chiều dọc.
- grid-column, grid-row: khai báo độ rộng/cao mong muốn cho grid items.
Chọn Cái Nào?
CSS Flexbox cho phép thiết kế layout một chiều (one-dimensional): setup layout bằng hàng hoặc cột. Phù hợp cho trang web tập trung vào flexibility responsive design hơn content placement.
Ngược lại, CSS Grid cho phép layout trong không gian hai chiều (two-dimensional): cả hàng và cột. Có properties control layout, width, height từng container trong grid. Kết quả có thể giống cửa sổ kính màu (stained glass) ở đầu blog.
Nếu tập trung vào content placement và muốn control child containers trong không gian → Grid phù hợp. Flexbox tập trung vào flow của content hơn là placement.
Browser support cho Grid không rộng bằng Flexbox – đơn giản vì Flexbox ra đời sớm hơn. Điều này có thể cân nhắc khi chọn layout model cho project.
Kết Luận
Dù chọn layout model nào, cả hai đều là lựa chọn hợp lệ. Việc chọn Flex hay Grid phụ thuộc vào mục đích của project.