Sân chơi CSS Flexbox
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.
Trình chặn quảng cáo đang ngăn chúng tôi hiển thị quảng cáo
MiniWebtool miễn phí nhờ quảng cáo. Nếu công cụ này hữu ích, hãy ủng hộ bằng Premium (không quảng cáo + nhanh hơn) hoặc cho phép MiniWebtool.com rồi tải lại trang.
- Hoặc nâng cấp Premium (không quảng cáo)
- Cho phép quảng cáo cho MiniWebtool.com, rồi tải lại
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-contentvà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-basisvàalign-selfcủ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:
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-grownói rằng "nếu có không gian dư thừa, hãy lấy phần này." Giá trị0nghĩa là từ chối phát triển;1nghĩa là phát triển theo tỷ lệ;2nghĩa là lấy phần gấp đôi so với mục có giá trị1.flex-shrinknó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ệ);0nghĩ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
gapthay vì margin. Các trình duyệt hiện đại hỗ trợ đầy đủgaptrê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: 0trê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 đặtmin-width: 0trê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-growcó thể tạo ra kết quả bất ngờ. Ưu tiênflex-basisvớ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
- CSS Flexible Box Layout - MDN
- CSS Flexible Box Layout Module Level 1 - W3C Specification
- CSS Flex Box Layout - Wikipedia
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:
Công cụ quản trị web:
- Máy tính CPC
- Máy tính CPM
- Máy nén CSS
- Công cụ tạo favicon Mới
- Máy tính Google AdSense
- Tạo Cron Job Nổi bật
- Công cụ tạo biểu thức Crontab Mới
- Máy nén HTML
- Trình chuyển đổi HTML sang văn bản Nổi bật
- Công cụ kiểm tra mật độ từ khóa Mới
- Trình tạo bảng Markdown Nổi bật
- Trình tạo thẻ Meta
- Công Cụ Xóa Dấu Ngoặc Kép Thông Minh Nổi bật
- Trình Tạo Slug URL Nổi bật
- Máy tính Giá trị Trang
- Công cụ tính giá trị của một khách truy cập
- Máy tính phân quyền Unix (chmod) Nổi bật
- Công cụ Mã hóa/Giải mã Thực thể HTML Nổi bật
- Trình tạo Lorem Ipsum Mới
- Escape Unescape Chuỗi JSON Nổi bật
- Công cụ chuyển đổi cURL sang JSON Mới
- Trình định dạng SQL Mới
- Công cụ tối ưu SVG Mới
- Trình tạo chuyển hướng Htaccess Mới
- Trình Kiểm Tra Kích Thước Thu Thập Googlebot Mới
- Trình tạo robots.txt Mới
- Trình tạo Sơ đồ trang XML Mới
- Công cụ Kiểm tra Tuổi Tên miền Mới
- Trình kiểm tra Open Graph Mới
- Tra cứu WHOIS Mới
- Tra cứu DNS Mới
- Kiểm tra tốc độ trang Mới
- Kiểm tra độ tin cậy tên miền Mới
- Kiểm tra Chuyển hướng Mới
- Trình tạo thẻ Hreflang Mới
- Kiểm tra liên kết hỏng Mới
- Sân chơi CSS Flexbox Mới