Sân chơi CSS Flexbox

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

1. 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.
2. Đ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.
3. 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ỏ.
4. 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.
5. 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.

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 đó.

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:

Đâ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

• CSS Flexible Box Layout - MDN
• CSS Flexible Box Layout Module Level 1 - W3C Specification
• CSS Flex Box Layout - Wikipedia

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áy tính Google AdSense
• Tạo Cron Job
• Công cụ tạo biểu thức Crontab
• 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
• Trình tạo bảng Markdown
• Trình tạo thẻ Meta
• Công Cụ Xóa Dấu Ngoặc Kép Thông Minh
• Trình Tạo Slug URL
• 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)
• Công cụ Mã hóa/Giải mã Thực thể HTML
• Trình tạo Lorem Ipsum
• Escape Unescape Chuỗi JSON
• Công cụ chuyển đổi cURL sang JSON
• Trình định dạng SQL
• Công cụ tối ưu SVG
• Trình tạo chuyển hướng Htaccess
• Trình Kiểm Tra Kích Thước Thu Thập Googlebot
• 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
• Trình tạo CSS Grid Mới
• Trình Tạo Lệnh Git Mới
• Trình tạo Tệp .env Mới
• Trình tạo lệnh cURL Mới
• Tham Khảo Mã Trạng Thái HTTP Mới
• Trình Phân Tích URL Mới
• Trình tạo Chuỗi Truy vấn Mới
• Bộ chuyển đổi SVG sang React/JSX Mới
• Trình Biên Dịch SCSS Sang CSS Mới
• Trình Biên Dịch Less Sang CSS Mới
• Sân chơi TypeScript Mới
• Trình tạo Lược đồ JSON Mới
• Công cụ chuyển đổi PX sang REM Mới
• Công cụ chuyển đổi PT sang PX Mới