Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Complete Flexbox Course: Master CSS3 Flexbox for Good

Khóa học Flexbox toàn tập: Làm chủ CSS3 Flexbox một lần là dùng mãi

Khóa học Flexbox toàn tập: Làm chủ CSS3 Flexbox một lần là dùng mãi

Hướng dẫn bạn cách sử dụng mô hình Flexbox mới trong CSS3 để tạo bố cục web responsive hiệu quả hơn!

4.5
(2,351 đánh giá)
13,717 học viên
Giảng viên
Peter Sommerhoff
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 399.000đ -87%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
2.0 giờ video
23 bài giảng
9 bài quiz
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

Bạn sẽ học được gì

Tự tin dùng CSS Flexbox để tạo các bố cục hiện đại
Thiết kế website hiệu quả hơn
Viết code CSS chất lượng cao và có thể tái sử dụng
Căn giữa theo chiều dọc cho bất kỳ phần tử nào
Chiếm không gian còn lại trong container
Tạo gallery responsive đẹp mắt với Flexbox
Triển khai bố cục Holy Grail nổi tiếng

Yêu cầu

HTML & CSS cơ bản
Biết sử dụng trình soạn thảo code

Đối tượng phù hợp

Nhà thiết kế và lập trình viên web muốn nâng cao kỹ năng frontend
Designer muốn tăng năng suất làm việc
Bất kỳ ai muốn cập nhật những phát triển mới nhất trong tiêu chuẩn web

Nội dung khóa học

6 phần • 23 bài giảng
1 Cách tận dụng tối đa khóa học này
1 Flexbox là gì và tại sao nên sử dụng?
2 Trình duyệt có hỗ trợ Flexbox không?
3 Cách sử dụng Flexbox như thế nào?
4 Nguyên lý hoạt động của Flexbox
1 flex-direction - Tạo bố cục hàng và cột
2 justify-content - Căn chỉnh items dọc theo trục chính
3 align-items - Căn chỉnh items dọc theo trục phụ
4 flex-wrap - Nhiều hàng và xuống dòng trong Flex Containers
5 align-content - Căn chỉnh nội dung dọc theo trục phụ
1 order - Sắp xếp lại thứ tự Flex Items
2 align-self - Các phần tử "cứng đầu"
3 flex-grow - Cho phép các phần tử con mở rộng
4 flex-shrink - Thu nhỏ Flex Items
5 flex-basis - Thiết lập kích thước cơ sở
1 Flexbox Grids: Tạo Gallery Responsive #1 (Code tối giản)
2 Flexbox Grids: Tạo Gallery Responsive #2 (Linh hoạt nâng cao)
3 Căn giữa theo chiều dọc thực sự với Flexbox (không cần vertical-align)
4 Mẫu thiết kế Media Object
5 Bố cục Holy Grail
6 Bảng tra cứu nhanh Flexbox
1 Tóm tắt nhanh và những gì sắp tới
2 Quà tặng: Khai phá tiềm năng tối đa của bạn với tư cách Lập trình viên

Giới thiệu khóa học

After this course, you'll be able to use Flexbox to...

  • vertically align any element

  • create modern grids

  • take up remaining space

  • add spacing between elements

  • implement complete site layouts

  • and much more!

 

More goodies inside this course:

  • I'll answer all questions you may have along the way to make sure you reach your learning goals

  • I've added manual, high-quality captions (CC) to this course

  • To see Flexbox in practice, 3 mini-projects will manifest your skills and enable you to use Flexbox productively in future web design projects.


What Students Say About Me (taken from various courses of mine)

Such a great course. second one for me with Peter Sommerhoff.
a great Instructor, uses very easy way to explain the materials.

- Ahmed


I absolutely LOVE this course, it teaches everything you need in details
and more! They really do listen to their students and answer as fast as
the road runner. Thanks so much for posting your course and I am
looking forward other courses!

- Ana


Great course, Peter explained it thoroughly, and he answers any questions within a day.

- Dunja


The course covered the required information quickly and concisely
without fluff or wasted motion. It provides sufficient pointers to
additional information and documentation. I thought it was a good
value.

- Robert


I'm glad to have received such great reviews from my students -- and I'll do my best to provide you with the best learning I can as well.


Check out the free preview videos below.

I look forward to seeing you inside :)



***


In this tutorial, you'll learn to use each and every Flexbox property:

Styling flex containers:

  1. flex-direction

  2. justify-content

  3. align-items

  4. flex-wrap

  5. align-content

Then individual flex items:

  1. order

  2. align-self

  3. flex-grow

  4. flex-shrink

  5. flex-basis

  6. flex

At the end, we'll look at real-world Flexbox examples to see what kinds of layouts can be achieved:

  1. Simple grids with Flexbox where all columns in a row have the same size

  2. More advanced Flexbox grids where columns can have arbitrary sizes

  3. Vertical centering to vertically align any element

  4. Media objects, the popular OOCSS pattern

  5. The Holy Grail Layout, a complete site layout with sidebars and sticky footer


As a bonus, this course includes a complete Flexbox Cheat Sheet that you can use to recap all you've learned and to refer back to while using Flexbox.

Additionally, I included the code for a Flexbox demo showcase -- which is like an interactive cheat sheet for you to see in the browser that contains every property and every layout example from this tutorial.

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Css
Hiển thị tất cả khoá học Frontend Development
Hiển thị tất cả khoá học Ui Design
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊