CSS Flexbox (Flexible Box Layout) là một mô hình bố cục một chiều trong CSS được thiết kế để phân bổ không gian dọc theo một trục duy nhất (hàng hoặc cột) và căn chỉnh các mục bên trong một vùng chứa. Nó lý tưởng cho các thanh điều hướng, bố cục thẻ, căn giữa nội dung và bất kỳ giao diện người dùng nào cần căn chỉnh linh hoạt mà không cần tính toán phức tạp hoặc dùng float.

flex-wrap có tác dụng gì?

flex-wrap kiểm soát việc các mục flex nằm trên một dòng hay tự động xuống nhiều dòng khi không đủ không gian. Giá trị mặc định nowrap buộc các mục nằm trên một dòng duy nhất và có thể làm chúng co lại. wrap cho phép các mục chảy xuống dòng mới, trong khi wrap-reverse sẽ xuống dòng theo thứ tự ngược lại.

Sân chơi CSS Flexbox

Q: Sự khác biệt giữa justify-content và align-items là gì?

justify-content kiểm soát căn chỉnh dọc theo trục chính (mặc định là ngang), trong khi align-items kiểm soát căn chỉnh dọc theo trục chéo (mặc định là dọc). Khi bạn thay đổi flex-direction thành column, các trục sẽ hoán đổi: justify-content trở thành chiều dọc và align-items trở thành chiều ngang.

Q: Sự khác biệt giữa flex-grow, flex-shrink và flex-basis là gì?

flex-basis đặt kích thước ban đầu của một mục trước khi không gian trống được phân bổ. flex-grow xác định lượng không gian thừa mà một mục nên hấp thụ so với các mục khác (0 nghĩa là không phát triển). flex-shrink xác định mức độ một mục sẽ co lại khi không đủ không gian (0 nghĩa là không co lại). Cách viết tắt flex: 1 1 auto sẽ thiết lập cả ba cùng một lúc.

Q: Khi nào nên sử dụng Flexbox so với Grid?

Sử dụng Flexbox cho các bố cục một chiều nơi các mục chảy theo một hướng duy nhất (một hàng nút, thanh điều hướng, danh sách các thẻ trên một dòng). Sử dụng CSS Grid cho các bố cục hai chiều nơi bạn cần kiểm soát cả hàng và cột đồng thời (bố cục toàn trang, thư viện ảnh, bảng điều khiển). Cả hai bổ sung cho nhau chứ không cạnh tranh — nhiều thiết kế thực tế kết hợp cả hai.

Sân chơi CSS Flexbox tương tác với bản xem trước trực quan trực tiếp, điều khiển từng mục, các mẫu bố cục thực tế (Holy Grail, Card Grid, Navbar, Modal) và xuất CSS bằng một cú nhấp chuột. Tìm hiểu flex-direction, justify-content, align-items, gap và nhiều hơn nữa bằng cách thử nghiệm trong thời gian thực.

Sân chơi CSS Flexbox

⚡ Bố cục khởi đầu nhanh (nhấp để tải)

▦ Xem trước trực tiếp

→ trục chính ↓ trục chéo 0 mục mẹo: nhấp vào mục bất kỳ để chỉnh sửa

⚙ Vùng chứa (.flex-container)

flex-direction ?

flex-wrap ?

justify-content ?

align-items ?

align-content ?

gap 8px

8px

✦ Mục đã chọn (.flex-item)

Nhấp vào một mục trong bản xem trước để chỉnh sửa các thuộc tính của nó.

📖 Bảng tra cứu nhanh — các mẫu phổ biến

▼

Tôi muốn…	Sử dụng thuộc tính này
Căn giữa hoàn hảo một mục	`justify-content: center; align-items: center`
Các cột có chiều rộng bằng nhau	`flex: 1` trên mỗi mục
Đẩy một mục sang bên phải	`margin-left: auto` trên mục đó
Xuống dòng các thẻ trên màn hình nhỏ	`flex-wrap: wrap` + `flex: 1 1 240px`
Đảo ngược thứ tự trên di động	`flex-direction: row-reverse` trong media query
Chân trang cố định ở cuối khung nhìn	body: `display: flex; flex-direction: column; min-height: 100vh`
Khoảng cách đều nhau giữa các mục	`justify-content: space-between`
Không cho một mục co lại	`flex-shrink: 0` trên mục đó

Mã CSS đã tạo

Mã HTML đã tạo

Embed Sân chơi CSS Flexbox Widget

Giới thiệu về Sân chơi CSS Flexbox

Sân chơi CSS Flexbox là một môi trường học tập tương tác và trình tạo mã cho mô-đun Bố cục Hộp Linh hoạt (Flexible Box Layout) hiện đại của CSS. Điều chỉnh các thuộc tính vùng chứa (flex-direction, justify-content, align-items, gap) và các thuộc tính cho từng mục (flex-grow, flex-shrink, flex-basis, align-self, order) và xem bố cục của bạn cập nhật theo thời gian thực. Khi bạn có được kết quả ưng ý, chỉ cần sao chép mã CSS và HTML để dán trực tiếp vào dự án của mình.

CSS Flexbox là gì?

CSS Flexbox (Flexible Box Layout) là một mô hình bố cục một chiều được thiết kế để phân bổ không gian dọc theo một trục duy nhất (hàng hoặc cột) và căn chỉnh các mục bên trong một vùng chứa. Nó thay thế các kỹ thuật cũ hơn như float và mẹo inline-block cho các thanh điều hướng, hàng thẻ, nội dung căn giữa và bất kỳ giao diện người dùng nào cần các phần tử linh hoạt tự nhiên theo vùng chứa của chúng. Không giống như CSS Grid vốn là hai chiều, Flexbox vượt trội ở các sắp xếp đơn giản hơn nơi bạn kiểm soát căn chỉnh chỉ theo một hướng tại một thời điểm.

Cách sử dụng Sân chơi này

Chọn một mẫu có sẵn (tùy chọn): Chọn Holy Grail, Card Grid, Navbar, Hero, Modal hoặc Sticky Footer để tải một điểm khởi đầu thực tế. Mỗi mẫu là một bố cục hoàn chỉnh đang hoạt động mà bạn có thể nghiên cứu hoặc sửa đổi.
Điều chỉnh thuộc tính vùng chứa: Sử dụng các nút điều khiển trong bảng bên phải để thiết lập flex-direction, flex-wrap, justify-content, align-items, align-content và gap. Sân khấu trực quan sẽ cập nhật ngay lập tức.
Chỉnh sửa từng mục: Nhấp vào bất kỳ mục nào trong bản xem trước để chọn nó. Ghi đè order, flex-grow, flex-shrink, flex-basis và align-self của nó một cách độc lập với các mục còn lại. Các mục có ghi đè được đánh dấu bằng một biểu tượng nhỏ.
Thêm hoặc xóa các mục: Sử dụng Thêm mục và Xóa mục đã chọn để thay đổi số lượng mục và xem bố cục phản ứng như thế nào.
Sao chép mã: Phần Mã đã tạo ở dưới cùng luôn phản ánh bố cục hiện tại của bạn. Sao chép CSS, HTML hoặc cả hai chỉ với một cú nhấp chuột.

Tham khảo thuộc tính vùng chứa

Vùng chứa flex (flex container) là phần tử cha có thuộc tính display: flex. Các thuộc tính này kiểm soát cách tất cả các phần tử con của nó hoạt động cùng nhau.

Thuộc tính	Giá trị	Tác dụng
`flex-direction`	`row` · `row-reverse` · `column` · `column-reverse`	Thiết lập hướng trục chính. `row` sắp xếp các mục từ trái sang phải (mặc định); `column` xếp chồng chúng theo chiều dọc.
`flex-wrap`	`nowrap` · `wrap` · `wrap-reverse`	Kiểm soát việc các mục nằm trên một dòng hay xuống nhiều dòng khi hết không gian.
`justify-content`	`flex-start` · `center` · `flex-end` · `space-between` · `space-around` · `space-evenly`	Căn chỉnh các mục dọc theo trục chính. Phân bổ không gian trống sang hai bên hoặc giữa các mục.
`align-items`	`stretch` · `flex-start` · `center` · `flex-end` · `baseline`	Căn chỉnh các mục dọc theo trục chéo (vuông góc với trục chính).
`align-content`	`stretch` · `flex-start` · `center` · `flex-end` · `space-between` · `space-around`	Căn chỉnh các dòng đã xuống hàng dọc theo trục chéo. Chỉ có tác dụng khi các mục xuống nhiều dòng.
`gap`	độ dài, ví dụ: `8px`, `1rem`	Thiết lập khoảng cách giữa các mục flex. Thay thế mô hình tạo khoảng cách dựa trên `margin` cũ.

Tham khảo thuộc tính mục

Các thuộc tính này được áp dụng cho từng mục flex (phần tử con của vùng chứa flex) và ghi đè các cài đặt mặc định của vùng chứa cho riêng mục đó.

Thuộc tính	Giá trị	Tác dụng
`order`	số nguyên (mặc định `0`)	Sắp xếp lại các mục theo trực quan mà không thay đổi HTML. Số thấp hơn hiển thị trước; giá trị âm di chuyển mục lên đầu.
`flex-grow`	số (mặc định `0`)	Xác định lượng không gian trống của vùng chứa mà mục này sẽ hấp thụ so với các anh em của nó. Giá trị `1` trên mỗi mục sẽ chia đều không gian.
`flex-shrink`	số (mặc định `1`)	Xác định mức độ một mục có thể co lại khi không đủ chỗ. `0` nghĩa là không bao giờ co — mục giữ nguyên kích thước đã khai báo.
`flex-basis`	`auto` · độ dài · phần trăm	Thiết lập kích thước ban đầu của một mục trước khi không gian trống được phân bổ. Về cơ bản là đặt kích thước trục chính "lý tưởng" của mục.
`align-self`	`auto` · giống như `align-items`	Ghi đè thuộc tính `align-items` của vùng chứa cho một mục duy nhất.

Sự khác biệt giữa justify-content và align-items là gì?

justify-content kiểm soát căn chỉnh dọc theo trục chính, trong khi align-items kiểm soát căn chỉnh dọc theo trục chéo. Trục chính là hướng mà flex-direction thiết lập — chiều ngang cho row, chiều dọc cho column. Khi bạn thay đổi flex-direction từ row sang column, hai trục này hoán đổi cho nhau, do đó justify-content trở thành chiều dọc và align-items trở thành chiều ngang. Sự hoán đổi này là một trong những nguồn gây nhầm lẫn phổ biến nhất khi mọi người học Flexbox; các chỉ số trục của sân chơi bên dưới bản xem trước giúp bạn thấy rõ điều này.

Làm thế nào để căn giữa một phần tử với Flexbox?

Để căn giữa một phần tử duy nhất cả theo chiều ngang và chiều dọc:

Ba dòng mã:
display: flex;
justify-content: center; /* chiều ngang */
align-items: center; /* chiều dọc */

Đây là giải pháp thay thế hiện đại cho các mẹo căn giữa cũ liên quan đến margin: auto, transform: translate(-50%, -50%), hoặc position: absolute. Hãy thử trong sân chơi bằng cách chọn mẫu Modal Center.

Giải thích các mẫu bố cục thực tế

Bố cục Holy Grail

Bố cục trang ba cột cổ điển: thanh bên trái, nội dung chính, thanh bên phải — với tiêu đề đầu trang và chân trang. Trong lịch sử rất khó xây dựng bằng float; Flexbox làm cho nó trở nên tầm thường. Cột giữa sử dụng flex: 1 để nó hấp thụ tất cả không gian ngang còn lại trong khi các cột bên giữ nguyên chiều rộng đã khai báo.

Card Grid (Lưới thẻ)

Một hàng các thẻ tự động xuống dòng khi khung nhìn hẹp lại. Sử dụng flex-wrap: wrap với mỗi thẻ được gán flex: 1 1 240px, nghĩa là thẻ sẽ phát triển và co lại nhưng không bao giờ hẹp hơn 240px.

Navbar (Thanh điều hướng)

Một thanh điều hướng ngang với logo ở bên trái và các liên kết ở bên phải. Bí quyết là justify-content: space-between với logo và nhóm liên kết là hai phần tử con, cộng với một vùng chứa flex nội bộ cho chính các liên kết.

Hero Section (Phần nổi bật)

Xếp chồng dọc với nội dung được căn giữa cả chiều ngang và chiều dọc — hoàn hảo cho các khu vực nổi bật của trang đích. Sử dụng flex-direction: column, justify-content: center, và align-items: center trên một vùng chứa cao.

Modal Center (Căn giữa hộp thoại)

Một hộp thoại modal được căn giữa hoàn hảo trong lớp phủ của nó. Cùng một công thức căn giữa ba dòng như trên, được áp dụng cho một vùng chứa lớp phủ toàn màn hình.

Sticky Footer (Chân trang cố định)

Một chân trang luôn nằm ở cuối khung nhìn khi nội dung ngắn, nhưng bị đẩy xuống khi nội dung dài. Đạt được bằng cách gán cho body display: flex; flex-direction: column; min-height: 100vh và phần nội dung chính là flex: 1.

Sự khác biệt giữa flex-grow, flex-shrink, và flex-basis là gì?

Ba thuộc tính này (được kết hợp thành cách viết tắt flex) mô tả cách một mục xử lý không gian:

flex-basis đặt kích thước lý tưởng của mục trước khi bất kỳ không gian trống nào được phân bổ. Hãy coi nó là "điểm khởi đầu" của mục.
flex-grow nói rằng "nếu có không gian dư thừa, hãy lấy phần này." Giá trị 0 nghĩa là từ chối phát triển; 1 nghĩa là phát triển theo tỷ lệ; 2 nghĩa là lấy phần gấp đôi so với mục có giá trị 1.
flex-shrink nói rằng "nếu không đủ không gian, hãy co lại theo phần này." Mặc định là 1 (co lại theo tỷ lệ); 0 nghĩa là từ chối co lại.

Cách viết tắt flex: 1 mở rộng thành flex: 1 1 0% — phát triển đều, co lại đều, cơ sở bằng không — nghĩa là tất cả các mục chiếm một phần bằng nhau của vùng chứa bất kể nội dung. flex: auto mở rộng thành flex: 1 1 auto, tôn trọng kích thước nội dung làm cơ sở.

Khi nào nên sử dụng Flexbox so với Grid?

Sử dụng Flexbox cho các bố cục một chiều nơi các mục chảy theo một hướng duy nhất — một hàng nút, thanh điều hướng, một cột thẻ duy nhất. Flexbox nhận biết nội dung và rất tuyệt khi bạn muốn các mục tự định kích thước.

Sử dụng CSS Grid cho các bố cục hai chiều nơi bạn cần kiểm soát cả hàng và cột đồng thời — bố cục toàn trang, thư viện ảnh, bảng điều khiển. Grid nhận biết bố cục và cho phép bạn đặt các mục vào các hàng/cột đã được định danh.

Cả hai bổ sung cho nhau chứ không cạnh tranh. Nhiều thiết kế thực tế kết hợp chúng: một bố cục trang bằng Grid với các thanh điều hướng và hàng thẻ bằng Flexbox bên trong.

Mẹo để làm chủ Flexbox

Hình dung các trục. Luôn biết hướng nào là "chính" (main) và hướng nào là "chéo" (cross) — các viên thuốc chỉ trục của sân chơi làm cho điều này trở nên rõ ràng.
Sử dụng gap thay vì margin. Các trình duyệt hiện đại hỗ trợ đầy đủ gap trên vùng chứa flex và nó loại bỏ nhu cầu sử dụng các mẹo margin khó chịu trên phần tử con cuối cùng.
Hãy dùng flex: 1. Khi bạn muốn các mục chia sẻ không gian bằng nhau, cách viết tắt này hầu như luôn là thứ bạn cần.
min-width: 0 trên các mục flex. Các mục có chiều rộng tối thiểu ngầm định dựa trên nội dung của chúng. Nếu các chuỗi dài không thể ngắt (như URL) làm bố cục của bạn bị tràn, hãy đặt min-width: 0 trên mục đó để ghi đè điều này.
Tránh sử dụng chiều rộng chỉ bằng phần trăm. Trộn lẫn chiều rộng phần trăm với flex-grow có thể tạo ra kết quả bất ngờ. Ưu tiên flex-basis với một giá trị mặc định hợp lý.

Hỗ trợ trình duyệt và tính tương thích

CSS Flexbox được hỗ trợ trong mọi trình duyệt hiện đại bao gồm Chrome, Firefox, Safari, Edge và tất cả các trình duyệt di động lớn. Thuộc tính gap trong vùng chứa flex đã đạt được sự hỗ trợ toàn cầu của trình duyệt vào năm 2021. Các trình duyệt cũ lỗi thời (IE10/11) yêu cầu tiền tố nhà cung cấp và có một số lỗi đã được ghi nhận; đối với những đối tượng người dùng đó, hãy xem xét flexbugs.

Câu hỏi thường gặp

Tại sao mục flex của tôi bị tràn ra ngoài vùng chứa?

Các mục flex có min-width: auto ngầm định dựa trên nội dung của chúng. Các từ dài, khối mã hoặc văn bản được định dạng trước có thể buộc một mục rộng hơn vùng chứa. Khắc phục bằng cách đặt min-width: 0 trên mục đó (hoặc min-height: 0 cho bố cục cột).

Sự khác biệt giữa space-between, space-around, và space-evenly là gì?

space-between không để lại khoảng trống ở hai đầu và để khoảng trống bằng nhau giữa các mục. space-around để lại nửa khoảng trống ở mỗi đầu và khoảng trống đầy đủ giữa các mục. space-evenly để lại khoảng trống bằng nhau ở cả hai đầu và giữa các mục. Hãy thử chuyển đổi chúng trong sân chơi để cảm nhận sự khác biệt.

Tôi có thể tạo hoạt ảnh cho các thuộc tính flex không?

Có. flex-grow, flex-shrink, flex-basis, order, và gap có thể sử dụng transition. Việc tạo hoạt ảnh cho flex-direction, justify-content, và align-items không được hỗ trợ vì chúng là các thuộc tính liệt kê riêng biệt.

Sân chơi có hoạt động ngoại tuyến không?

Tất cả các tính toán Flexbox diễn ra trong trình duyệt của bạn bằng CSS gốc. Khi trang đã được tải, bạn có thể sử dụng sân chơi mà không cần kết nối internet — không có lệnh gọi API hay tính toán phía máy chủ.

Mã được tạo có sẵn sàng cho sản xuất không?

Có. Mã CSS được xuất sử dụng các thuộc tính tiêu chuẩn được hỗ trợ trong mọi trình duyệt hiện đại. Mã HTML sử dụng các tên lớp có ý nghĩa (flex-container, flex-item) mà bạn có thể đổi tên để phù hợp với quy ước của dự án mình.

Tài nguyên bổ sung

Tham khảo nội dung, trang hoặc công cụ này như sau:

"Sân chơi CSS Flexbox" tại https://MiniWebtool.com/vi/san-choi-css-flexbox/ từ MiniWebtool, https://MiniWebtool.com/

bởi đội ngũ miniwebtool. Cập nhật: 25 tháng 4, 2026

Các công cụ liên quan khác:

Trình tạo bảng màu sắc

Máy nén CSS

Trình tạo CSS GridMới

Trình tạo Gradient

Máy nén HTML

Sân chơi CSS Flexbox

Giới thiệu về Sân chơi CSS Flexbox

CSS Flexbox là gì?

Cách sử dụng Sân chơi này

Tham khảo thuộc tính vùng chứa

Tham khảo thuộc tính mục

Sự khác biệt giữa justify-content và align-items là gì?

Làm thế nào để căn giữa một phần tử với Flexbox?

Giải thích các mẫu bố cục thực tế

Bố cục Holy Grail

Card Grid (Lưới thẻ)

Navbar (Thanh điều hướng)

Hero Section (Phần nổi bật)

Modal Center (Căn giữa hộp thoại)

Sticky Footer (Chân trang cố định)

Sự khác biệt giữa flex-grow, flex-shrink, và flex-basis là gì?

Khi nào nên sử dụng Flexbox so với Grid?

Mẹo để làm chủ Flexbox

Hỗ trợ trình duyệt và tính tương thích

Câu hỏi thường gặp

Tại sao mục flex của tôi bị tràn ra ngoài vùng chứa?

Sự khác biệt giữa space-between, space-around, và space-evenly là gì?

Tôi có thể tạo hoạt ảnh cho các thuộc tính flex không?

Sân chơi có hoạt động ngoại tuyến không?

Mã được tạo có sẵn sàng cho sản xuất không?

Tài nguyên bổ sung

Các công cụ liên quan khác:

Công cụ quản trị web:

Công cụ nổi bật: