8 Hướng dẫn CSS Flexbox tốt nhất

Ngày đăng: 08/06/2019   -    Cập nhật: 11/02/2020
Mỗi trang web hiện đại ngày nay cần phải thân thiện với thiết bị di động (Thích ứng trên nhiều thiết bị có kích cỡ khác nhau - Website Responsive).


Bạn có thể dễ dàng làm điều này bằng cách sử dụng các kỹ thuật responsive, một trong số đó là tính năng CSS 
flexbox.


Flexbox cho phép bạn xác định các thành phần bố cục là các box linh hoạt có thể điều chỉnh dựa trên vùng chứa.


Vì vậy, bạn có thể quyết định một phần tử sẽ chiếm bao nhiêu phần, chúng sẽ di chuyển khi container được thay đổi kích thước và có thể sắp xếp nội dung đó lại cho phù hợp.


Nếu bạn chưa bao giờ sử dụng thuộc tính flexbox trước đây thì bạn hãy nên thử Flexbox bởi vì nó là cách mạng của CSS3 đấy.


Danh sách các hướng dẫn dưới dây sẽ giúp bạn hiểu rõ về Flexbox từ các thuật ngữ đến cách sử dụng. Từ đó, sử dụng Flexbox bạn có thể bố trí website của bạn linh động hơn bao giờ hết.



1. Flexbox Froggy: Chơi với Ếch để học Flexbox



Những hướng dẫn CSS Flexbox tốt nhất: Flexbox Froggy


Những hướng dẫn CSS Flexbox tốt nhất: Flexbox Froggy


Mình thấy đây series hướng dẫn tốt nhất cho những người mới bắt đầu tìm hiểu về Flexbox.


Flexbox Froggy là một trò chơi mã nguồn mở miễn phí giúp bạn tìm hiểu các thuộc tính và vận dụng chúng qua các level.


Tại đây họ giúp bạn luyện tập các thuộc tính cơ bản của Flexbox.


Từ đó, từ ban đầu đơn giản và đến các cấp độ cao thì càng khó hơn.


Trò chơi này rất thú vị và hữu ích ngay cả đối với các lập trình viên có kinh nghiệm. Nếu bạn cần tóm tắt những điều Flexbox có thể làm thì đây chính là nơi bạn cần thử qua.


Thậm chí nếu bạn đã hiểu và cần đến các cấp độ khó hơn thì Flexbox Froggy cũng cho phép bạn bỏ qua. Học tập là tự do. Thu hút bạn đơn giản bằng sự thú vị.



2. What the Flexbox: Bộ Video Hướng dẫn đầy đủ về Flexbox



Những hướng dẫn CSS Flexbox tốt nhất: What the Flexbox


Những hướng dẫn CSS Flexbox tốt nhất: What the Flexbox
 

What the Flexbox?! nghe có vẻ giống như một trò chơi giải đố nhưng nó thực sự là một cách hay để tìm hiểu về CSS Flexbox.


Đây là bộ 20 video hướng dẫn của Wes Bos về Flexbox với sự đơn giản, ngắn gọn, dễ hiểu.


Wes Bos giúp bạn hiểu tất cả mọi thứ liên quan đến flexbox, bao gồm cả thay đổi kích thước container và làm thế nào để responsive ngay từ đầu.


Bộ video này cần phải đăng ký email. Nhưng dĩ nhiên là miễn phí hoàn toàn.


Phần tốt nhất là những video là dạy các ví dụ thực tế, bạn có thể vừa học và vừa làm cùng. Rất thực tế, mình vẫn nghĩ đây là cách học tốt nhất.



3. CSS - Tricks Guide: Hướng dẫn đầy đủ về Flexbox



Hướng dẫn CSS Flexbox tốt nhất: A complete Guide to Flexbox

Những hướng dẫn CSS Flexbox tốt nhất: A complete Guide to Flexbox
 

Nếu bạn thích một hướng dẫn bằng bài viết, thì hãy xem hướng dẫn Flexbox của CSS - Tricks. Nó bao gồm khá nhiều thứ bạn cần biết, bắt đầu từ những điều cơ bản tuyệt đối của flexbox.


Bạn sẽ tìm thấy rất nhiều hình ảnh trong quá trình giải thích thuật ngữ của Flexbox, bố cục và cách tổ chức nội dung. Nó không phải là hướng dẫn tốt nhất trên thế giới về Flexbox, nhưng nó có lẽ là tốt nhất cho người mới bắt đầu chỉ muốn đọc để tìm hiểu.



4. Flexbox Intro Tut: Hoàn thành Flexbox trong 1 bài viết.



Hướng dẫn về CSS Flexbox tốt nhất - Flexbox Intro Tut


Hướng dẫn về CSS Flexbox tốt nhất - Flexbox Intro Tut
 

Mình cũng thực sự quan tâm về series hướng dẫn Flexbox trên Interneting is Hard này. Đó là một chỗ dành riêng cho các bài hướng dẫn, với mục tiêu của giúp mọi người hiểu được lập trình.


Mỗi phần đều có sơ đồ đẹp để giải thích cú pháp và các thuật ngữ giúp bạn học HTML và CSS tốt hơn. Và mình phải nói rằng hướng dẫn về Flexbox của họ rất tốt.


Điều đặc biệt ở đây là, bài viết hướng dẫn này bao gồm toàn bộ về Flexbox, với hơn 12 phần được viết ở một trang duy nhất.


Hướng dẫn này sử dụng kỹ thuật thiết kế cho bài viết dài, tập trung vào nội dung. Thiết kế 1 cột với chiều rộng chỉ 580px (chỉ vừa đủ khoảng 12 từ).


Nếu bạn không biết thì việc đọc 1 hàng 12 từ dễ dàng hơn đọc 1 hàng 20 từ.


Và bạn sẽ nhanh chóng đọc 5000 từ như vậy mà không hề cảm thấy nó dài đâu.


Thậm chí là còn không hề có quảng cáo.



5. Visual Guide To CSS3 Flexbox: Hướng dẫn về Flexbox của Scoth.io



Hướng dẫn về CSS Flexbox tốt nhất - Scoth.io

Hướng dẫn về CSS Flexbox tốt nhất - Scoth.io
 

Hình ảnh luôn luôn giải thích mọi thứ một tốt hơn là lời nói, bài viết. Đó là lý do tại sao hướng dẫn Flexbox của Scotch.io là một trong những series hay mình muốn giới thiệu cho bạn.


Lưu ý và Series này sử dụng thêm rất nhiều đoạn mã để giải thích các khái niệm, vì vậy nó không chỉ là một một hướng dẫn hình ảnh.


Cứ thử đi, rồi chắc chắn bạn sẽ thấy thích series này. Nó nặng hơn về phía lập trình, vì vậy thực sự tốt nếu bạn đã biết cú pháp cơ bản.



6. Flexbox CSS in 20 Minutes: Hiểu về Flexbox CSS trong 20 phút





Mình biết nhiều người thích và có thể học tốt hơn thông qua video và có thể tìm thấy vô số hướng dẫn trên Youtube.


Cũng giống như series video của Wes Bos, nhưng nếu bạn thích nhanh chóng hơn thì có thể thử qua Video này của Travesy Media.


Video này của giải thích cú pháp 
flexbox chỉ trong 20 phút. Sau khi học xong video bạn sẽ thấy mình mạnh mẽ hơn nhiều, bạn sẽ hiểu tại sao Float lại bị thay thế bởi Flexbox.


6. Building A Simple Layout With Flexbox: Video hướng dẫn nhanh về Flexbox






Để có được vào một vide thực tế hơn, bạn có thể xem qua video hướng dẫn này được ghi lại bởi Kevin Powell. 


Đó là một video khá ngắn, tổng cộng chỉ khoảng 11 phút. Nhưng nó diễn giải thẳng vào điểm cần thiết khi nói đến Flexbox Model.


Nếu bạn muốn một video bạn có thể dễ dàng làm theo thì video này rất đáng xem. Qua video này bạn sẽ không tìm hiểu được mọi thứ về flexbox, nhưng bạn sẽ hiểu đủ để sử dụng nó cho bố trí layout website.



7. Xây dựng lại Website Dribble sử dụng Flexbox






Có lẽ đây là một yêu thích của mình. Bởi vì nó đi sâu vào việc dạy bạn làm thế nào để tạo một dự án ngay từ đầu.


Kênh Youtube DevTips tạo ra hướng dẫn về Flexbox, trong đó cho bạn thấy làm thế nào để xây dựng lại toàn bộ Layout Dribbble bằng cách sử dụng flexbox.


Đây chính xác là kiểu hướng dẫn mình muốn giới thiệu cho người mới bắt đầu thích thực sự nhảy vào dự án và tìm hiểu làm thế nào để lập trình từ đầu. 


Đọc và ghi nhớ thuộc tính CSS là rất tốt.


Nhưng với kiểu này, chúng ta học kỹ thuật thực tế làm thế nào để bố trí layout ngay từ đầu. Và đó là những trải nghiệm, những kinh nghiệm bạn có thể mang vào các dự án trong tương lai.



8. Flat Responsive Flexbox Site: Video hướng dẫn xây dựng Webstie từ đầu bằng Flexbox





Cuối cùng mình nhận thấy hướng dẫn dài video dài về Flexbox cũng có điểm hay của nó. Trong video này, bạn sẽ tìm thấy hướng dẫn hơn 1 giờ về việc xây dựng một trang web hoàn chỉnh từ đầu với flexbox.


Bạn sẽ học cách bố trí lưới và cách thiết kế toàn bộ trang thân thiện với thiết bị di động. 


Tuy nhiên, điều này chi tiết hơn nhiều so với các video hướng dẫn khác. Do đó, mình thực sự khuyên bạn nên xem video này sau khi bạn hiểu những điều cơ bản.


Nó sẽ bao gồm rất nhiều nguyên tắc cơ bản của các thuộc tính 
CSS flexbox nhưng nó cũng khá nhanh.


#BONUS: TỰ HỌC FLEXBOX TOÀN TẬP


Hướng dẫn tự học Flexbox toàn tập

Hướng dẫn tự học Flexbox toàn tập
 

Đây là bài hướng dẫn Tự học Flexbox [Toàn tập].


Nó bao gồm tất cả các thuộc tính của Flexbox, giải thích chi tiết và kèm theo ví dụ để bạn biết thuộc tính đó sử dụng thực tế như thế nào.


Điều quan trọng là bạn chỉ cần đọc một bài viết này thôi và có mọi thứ của Flexbox.


PS: Dĩ nhiên là tiếng Việt.



Bạn thích Hướng dẫn nào trong các Hướng dẫn tốt nhất về Flexbox mà mình vừa liệt kê ở trên? Hãy cho mình biết trong phần bình luận nhé.



Tham khảo ngay: Học Lập trình Web PHP từ Front-end đến Back-end trong vòng 4-6 tháng tại NIIT - ICT Hà Nội


---
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 #java #php #python
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!