Kết hợp sức mạnh của CSS Grid và CSS Flexbox

Ngày đăng: 30/10/2018   -    Cập nhật: 13/05/2020

CSS Flexbox đã trở nên cực kỳ phổ biến trong vài năm gần đây. Điều này không đáng ngạc nhiên, bởi vì nó giúp chúng ta tạo ra các bố cục động và sắp xếp nội dung trong các container dễ dàng hơn rất nhiều.
 

  1. Một chiều và Hai chiều
  2. Content-frist vs Layout-frist
  3. Sử dụng Flexbox
  4. Sử dụng Grid
  5. Kết hợp Grid và Flex


Tuy nhiên, có một đứa trẻ mới ra đời được gọi là CSS Grid và nó có nhiều khả năng giống như Flexbox. Một số trường hợp nó tốt hơn so với Flexbox, trong khi một số trường hợp khác thì không.
 

Đây có vẻ là dễ gây nhầm lẫn cho các nhà phát triển front-end. Vì vậy, trong bài này tôi sẽ so sánh hai module, cả mức vi mô và vĩ mô.
 

Tìm hiểu cách Flexbox và Grid hoạt động khác nhau như thế nào, và khi nào bạn nên sử dụng một trong số chúng.
 

Note: Nếu bạn muốn học front-end từ cơ bản đến nâng cao, trước tiên hãy tham dự Khóa học HTML, CSS miễn phí của NIIT - ICT Hà Nội
 

Hãy bắt đầu!
 

Một chiều với hai chiều



Nếu bạn muốn mình sẽ học điều gì đó từ bài viết này, hãy để nó là một trong những điều sau:



Flexbox được làm cho bố cục một chiềuGrid được làm cho bố cục hai chiều.



Điều này có nghĩa là nếu bạn đặt các mục theo một hướng (ví dụ ba nút bên trong tiêu đề), thì bạn nên sử dụng Flexbox:

 

ket-hop-suc-manh-cua-css-grid-va-css-flexbox-mot-chieu

Bố cục một chiều bằng Flexbox

 

Nó sẽ cho bạn sự linh hoạt hơn là CSS Grid. Flexbox sẽ dễ dàng hơn để duy trì và yêu cầu ít code hơn.

 

Tuy nhiên nếu bạn định tạo toàn bộ bố cục theo hai chiều - với cả hàng và cột - thì bạn nên sử dụng CSS Grid:

 

ket-hop-suc-manh-cua-css-grid-va-css-flexbox-bo-cuc-2-chieu

Bố cục hai chiều bằng Grid
 

Trong trường hợp này, CSS Grid sẽ cung cấp cho bạn sự linh hoạt hơn, làm cho đánh dấu của bạn đơn giản hơn và mã sẽ được dễ dàng hơn để duy trì.

 

Tất nhiên là bạn có thể kết hợp cả hai.

 

Trong ví dụ ở trên nó sẽ là hoàn hảo để sử dụng Grid cho việc bố trí trang, và sau đó Flexbox để align nội dung bên trong tiêu đề.

 

Điều này sẽ cung cấp cho bạn ưu điểm của cả hai. Và tôi sẽ chỉ cho bạn chính xác cách thực hiện ở cuối bài viết này.

 

Content-frist vs Layout-frist



Một khác biệt cơ bản giữa Css Grid và Css Flexbox là Flexbox mất cơ sở trong nội dung trong khi Grid mất cơ sở trong cách bố trí.

 

Điều này có vẻ trừu tượng, vì vậy hãy xem xét một ví dụ cụ thể, nó sẽ làm bạn dễ hiểu hơn.

 

Chúng ta sẽ sử dụng tiêu đề từ đoạn trước. Đây là HTML cho nó:

 

<header>
    <div>Home</div>
    <div>Search</div>
    <div>Logout</div>
</header>



Trước khi chúng ta biến nó thành một bố cục Flexbox, các div này sẽ được xếp chồng lên nhau như sau:

 

ket-hop-suc-manh-cua-css-grid-va-css-flexbox-3

Tạo menu cơ bản với HTML

 

Tôi đã thêm một chút css cơ bản để dễ nhìn, chưa làm gì với Flexbox hoặc Grid.

 

Sử dụng Flexbox header



Tuy nhiên, khi chúng ta cho nó thuộc tính display: flex; các item sẽ được đặt trên một đường dây.

 

header {
    display: flex;
}



ket-hop-suc-manh-cua-css-grid-va-css-flexbox-kich-hoat-flexbox

Header đã kích hoạt Flexbox



Để di chuyển nút Logout sang bên phải ta chỉ việc đơn giản là target vào element đó và áp dụng margin-left:

 

header > div:nth-child(3) {
    margin-left: auto;
}



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

 

ket-hop-suc-manh-cua-css-grid-va-css-flexbox-di-chuyen-logout-sang-phai

Di chuyển Logout sang bên phải



Những gì tôi muốn bạn lưu ý ở đây là chúng ta chỉ cần để nó lê các item sẽ tự quyết định chúng được đặt như thế nào.

 

Chúng tôi không phải xác định trước bất cứ điều gì khác ngoài display: flex;.

 

Đây là cốt lõi của sự khác biệt giữa Flexbox và Grid, và nó sẽ trở nên rõ ràng hơn khi chúng ta tái tạo tiêu đề này bằng cách sử dụng Grid.

 

Mặc dù CSS Grid không được xây dựng để tạo tiêu đề một chiều, nhưng vẫn có một bài tập hay để làm tiêu để 1 chiều trong bài viết này vì nó cho chúng ta biết về sự khác biệt cốt lõi giữa Flexbox và Grid.

 

Sử dụng Grid header



Chúng ta có thể tạo tiêu đề theo nhiều cách khác nhau bằng cách sử dụng CSS Grid. Nhưng tôi sẽ tạo Grid có mười cột, mỗi cột là một đơn vị fr.

 

> Xem bài viết này để hiểu rõ hơn về đơn vị fr.

 

header {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}



Nó giống hệt như là sử dụng Flexbox.

 

ket-hop-suc-manh-cua-css-grid-va-css-flexbox-su-dung-grid-cho-header

Sử dụng CSS Grid cho header.

 

Tuy nhiên, chúng ta hãy kiểm tra các hàng, cột để thấy sự khác biệt. Tôi sử dụng F12 của Chorme.

 

ket-hop-suc-manh-cua-css-grid-va-css-flexbox-su-khac-biet-cua-css-grid-va-flexbox

Kiểm tra phần tử để thấy sự khác biệt với Flexbox

 

Sự khác biệt chính với cách này là chúng ta phải xác định số lượng cột.

 

Chúng ta bắt đầu với việc xác định chiều rộng của các cột, và sau đó chúng ta đặt nội dung vào các ô grid có sẵn.

 

Cách tiếp cận này buộc chúng ta phải có suy nghĩ về số lượng cột chúng tôi muốn chia ban đầu.

 

Khi chúng ta thay đổi grid, chúng ta bị mắc kẹt với 10 cột. Một hạn chế mà chúng ta sẽ không phải đối mặt trong Flexbox.

 

Để di chuyển Logout sang phía bên tay phải, chúng ta sẽ đặt nó vào cột thứ mười, như sau:

 

header > div:nth-child(3) {
    grid-column: 10;
}



Dưới đây là cách mà nó hiển thị, hãy kiểm tra phần tử xem thế nào:

 

ket-hop-suc-manh-cua-css-grid-va-css-flexbox-su-dung-grid-di-chuyen-logout-sang-phai

Chuyển Logout sang bên phải



Chúng ta không thể chỉ đơn giản là cho nó một margin-left: auto; vì nút Logout đã được đặt trong một ô cụ thể trong bố cục, ô thứ 3.

 

Để di chuyển nó, chúng ta phải tìm một ô lưới khác cho nó. Và tôi đã để nó vào ô thứ 10

 

Kết hợp cả Grid và Flexbox



Bây giờ chúng ta hãy xem làm thế nào để sử dụng kết hợp cả hai, kết hợp tiêu đề của chúng ta vào bố cục trang web. Chúng ta sẽ bắt đầu bằng cách xây dựng bố cục trang web.

 

ket-hop-suc-manh-cua-css-grid-va-css-flexbox-tao-bo-cuc-voi-grid

Tạo bố cục với Grid



Đây là Code HTML:

 

<div class="container">
  <header>HEADER</header>
  <aside>MENU</aside>
  <main>CONTENT</main>
  <footer>FOOTER</footer>
</div>



Đây là CSS:

 

.container {
    display: grid;    
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
}



Chúng ta sẽ đặt các item vào grid, cụ thể như sau:

 

header {
    grid-column: span 12;
}
aside {
    grid-column: span 2;
}
main {
    grid-column: span 10;
}
footer {
    grid-column: span 12;
}



Bây giờ chúng ta chỉ cần thêm tiêu đề:

 

header {
    display: flex;
}



Tiếp đến là thiết lập nút Logout ở bên phải:

 

header > div:nth-child(3) {
    margin-left: auto;
}



Và chúng ta có một bố cục hoàn hảo, sử dụng ưu điểm từ cả Grid và Flexbox.


Đây là kết quả:


 

bo-cuc-sau-khi-ket-hop-suc-manh-cua-css-grid-va-css-flexbox

Bố cục sau khi kết hợp CSS Grid với Flexbox

 

Và bây giờ bạn đã biết được sức mạnh và ưu điểm của CSS Grid và Flexbox, nắm được cách chúng sử dụng với nhau.
 

Theo Per Harald Borgen Co-founder of Scrimba
 

---

HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI

Dạy học Lập trình chất lượng cao (Since 2002). Học làm Lập trình viên. Hành động ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0914939543 - 0353655150 
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
 
#niit #niithanoi niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp
Bình luận Facebook
Mục lục
Đăng ký tư vấn
Nhân viên gọi điện tư vấn miễn phí sau khi đăng ký
Được cập nhật các ưu đãi sớm nhất
Hotline: 0383180086
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Hãy đăng ký để nhận những thông tin mới nhất về học bổng mới nhất tại NIIT - ICT Hà Nội
top
Đóng lại Đăng ký học tại NIIT - ICT Hà Nội
6260+ học viên đã theo học tại NIIT - ICT Hà Nội và có việc làm tốt trong ngành lập trình. Nắm lấy cơ hội ngay hôm nay!
Chọn khóa học
  • KHÓA HỌC LẬP TRÌNH FRONT END VỚI REACT.JS
  • KHÓA HỌC LẬP TRÌNH PHP WEB
  • Khóa học PHP Full stack [2023] cho người mới bắt đầu
  • Khóa học BIG DATA với Hadoop và Spark
  • Khóa học Lập trình Android tại Hà Nội
  • [Tuyển sinh 2023] Lập trình viên Quốc tế DigiNxt
  • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại Hà Nội
  • LẬP TRÌNH GAME
    • Khóa học Lập trình Game Unity
  • LẬP TRÌNH WEB FRONT END
    • KHÓA HỌC PYTHON HƯỚNG ĐỐI TƯỢNG
    • KHÓA HỌC ANGULAR & TYPESCRIPT (FRONT END)
  • LẬP TRÌNH WEB BACK END
    • LẬP TRÌNH JAVA WEB VỚI FRAME WORK
    • Lập trình Web với Django
    • Lập trình PHP với Laravel Framework
  • CHƯƠNG TRÌNH ĐÀO TẠO ỨNG DỤNG CÔNG NGHỆ
    • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại TP HCM
  • LẬP TRÌNH WEB FULL STACK
    • Khóa học Java Full stack (IJFD)
  • LẬP TRÌNH MOBILE
    • FRONT-END VỚI REACTJS VÀ REACT NATIVE
    • Lập trình Android Nâng cao
  • ĐÀO TẠO CHO DOANH NGHIỆP
    • KHÓA HỌC BUSINESS ANALYSIC TỪ CƠ BẢN ĐẾN NÂNG CAO 2023
    • Khóa học Magento: Làm chủ CMS TMĐT lớn nhất
    • Khóa học IOT: Xây dựng Sản phẩm IOT với Raspberry Pi
    • Khóa học Automation Testing Chuyên nghiệp
  • KHÓA HỌC DỰ ÁN
    • Học sử dụng bộ Office: Word, Excel, Power Point, Mail chuyên nghiệp
  • KHÓA HỌC KHÁC
    • VBA Excel Toàn Tập (Cơ Bản - Nâng Cao)
    • VBA Excel Nâng cao
    • Khóa học JMeter: Performance Testing
    • Khóa học Tester đạt chuẩn Quốc tế ISTQB Foundation Level
    • Khoá Học Tester đạt chuẩn quốc tế ISTQB Advanced Level
Bạn chưa chọn khóa học cần đăng ký
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Đăng ký học thành công!
Cảm ơn bạn đã đăng ký học tại NIIT - ICT HÀ NỘI!