Trình tạo CSS Flexbox

Cách sử dụng

1. Xác định các thuộc tính của container: cấu hình container flex, flex-direction, justify-content, align-items, flex-wrap và gap.
2. Thêm và cấu hình các phần tử flex: thêm các phần tử con và xác định flex-grow, flex-shrink, flex-basis, align-self và order riêng lẻ.
3. Sao chép CSS: lấy CSS đầy đủ cho container và các phần tử, sẵn sàng sử dụng trong dự án của bạn.

Tại sao sử dụng trình tạo Flexbox?

Flexbox là công cụ thiết yếu cho bố cục CSS một chiều, căn chỉnh các phần tử theo dòng hoặc theo cột với các điều khiển phân phối và căn chỉnh mạnh mẽ. Nhưng các thuộc tính rất nhiều và các tương tác của chúng phức tạp: justify-content vs align-items, flex-grow vs flex-basis, trục chính vs trục ngang. Trình tạo tương tác này cung cấp phản hồi trực quan ngay lập tức khi bạn sửa đổi mỗi thuộc tính, làm cho nó trở thành cách nhanh nhất để học Flexbox và có được CSS phù hợp với bố cục của bạn.

Tính năng

• Xem trước tương tác: kéo các phần tử flex và kích hoạt các thuộc tính để xem các thay đổi theo thời gian thực.
• Tất cả các thuộc tính của container: flex-direction, flex-wrap, justify-content, align-items, align-content và gap.
• Kiểm soát theo phần tử: xác định flex-grow, flex-shrink, flex-basis, align-self và order riêng lẻ cho mỗi phần tử.
• Các chỉ báo trục trực quan: trục chính và trục ngang được làm nổi bật để củng cố mô hình khái niệm.
• Đầu ra CSS: CSS đầy đủ, sẵn sàng để sao chép, cho container và tất cả các phần tử được cấu hình.

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

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

justify-content phân phối các phần tử dọc theo trục chính (mặc định là ngang). align-items căn chỉnh các phần tử dọc theo trục ngang (mặc định là dọc). Khi flex-direction là column, các trục được hoán đổi, justify-content trở thành dọc và align-items trở thành ngang.

Khi nào sử dụng Flexbox hoặc CSS Grid?

Sử dụng Flexbox cho các bố cục một chiều, một hàng nút, một thanh điều hướng, một danh sách thẻ phải xuống dòng. Sử dụng CSS Grid cho các bố cục hai chiều mà bạn cần kiểm soát các hàng và cột đồng thời, như một bố cục đầy đủ hoặc một lưới thẻ phức tạp.

flex: 1 nghĩa là gì?

flex: 1 là phím tắt cho flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Điều này chỉ định cho phần tử lớn lên để lấp đầy không gian khả dụng, co lại nếu cần, và bắt đầu từ không trước khi phân phối không gian. Tất cả các phần tử với flex: 1 chia sẻ không gian một cách công bằng.

Flexbox thực sự làm gì

Flexbox (Flexible Box Layout) là một mô hình bố cục CSS được thiết kế để phân phối không gian và căn chỉnh các mục theo hướng một chiều: hoặc hàng hoặc cột. Nó giới thiệu hai khái niệm cốt lõi xác định cách mọi thứ hoạt động: trục chính (hướng chính các mục chảy, ngang theo mặc định) và trục chéo (vuông góc với trục chính, dọc theo mặc định). Khi bạn nội tâm hóa chính so với chéo, mọi thuộc tính Flexbox đều ánh xạ tới một trong số chúng: justify-content hoạt động trên trục chính, align-items hoạt động trên trục chéo, flex-direction hoán đổi trục nào là trục nào.

Flexbox đã giải quyết một loạt các vấn đề về bố cục đã làm khổ các nhà phát triển web từ năm 1998 đến 2014. Trước Flexbox, căn giữa một phần tử theo chiều dọc đòi hỏi các hack (display: table-cell, lề âm, position: absolute với biến đổi translate). Các cột có chiều cao bằng nhau đòi hỏi kỹ thuật cột giả với hình ảnh nền. Footer dính cần các tính toán pixel chính xác. Flexbox đã làm cho tất cả những điều này trở nên tầm thường: một khai báo một dòng thay thế hàng thập kỷ của các giải pháp tạm thời CSS. Sự đánh đổi là Flexbox một chiều; đối với các bố cục hai chiều (hàng VÀ cột đồng thời), CSS Grid (phát hành 2017) là công cụ tốt hơn.

Các thuộc tính Flexbox chia gọn gàng thành hai nhóm: thuộc tính container (áp dụng cho cha: display: flex, flex-direction, flex-wrap, justify-content, align-items, align-content, gap) và thuộc tính mục (áp dụng cho con: flex-grow, flex-shrink, flex-basis, align-self, order). Các thuộc tính container kiểm soát các mẫu bố cục; các thuộc tính mục kiểm soát các ngoại lệ riêng lẻ. Trình tạo này hiển thị cả hai bộ để bạn có thể thử nghiệm cách chúng tương tác mà không cần viết mã.

Công cụ này hoạt động bên dưới như thế nào

Bản xem trước trực tiếp là một container flex với các phần tử con mẫu. Khi bạn thay đổi các thuộc tính container (flex-direction, justify-content, v.v.) thông qua các trình đơn thả xuống và đầu vào, JavaScript cập nhật kiểu nội tuyến của container xem trước và trình duyệt render lại bố cục. Bản xem trước là triển khai Flexbox thực tế của trình duyệt, không phải mô phỏng JavaScript: bạn thấy chính xác những gì CSS của bạn sẽ tạo ra trên một trang thực tế.

Các điều khiển từng mục cho phép bạn điều chỉnh từng con một cách riêng lẻ. Bạn có thể thêm hoặc xóa mục, đặt giá trị flex-grow, flex-shrink, flex-basis, align-self và order của chúng, và xem cách container phân phối lại không gian tương ứng. Các chỉ báo trục trực quan hiển thị trục chính và trục chéo cho cấu hình hiện tại, củng cố mô hình tinh thần. Các thuộc tính là CSS thực mà bạn có thể sao chép trực tiếp vào stylesheet của mình, không cần chuyển đổi hoặc các tiền tố framework.

Bảng CSS đã tạo cập nhật với mỗi tương tác, tạo ra hai quy tắc CSS: một cho container (với các thuộc tính flex đã chọn) và một cho các mục. Nhấp Sao chép CSS và các quy tắc được ghi vào clipboard của bạn. Công cụ tự nó không bao giờ tạo yêu cầu mạng; render xem trước, tạo mã và ghi clipboard tất cả đều xảy ra trong JavaScript trên thiết bị của bạn. Tải lại trang và cấu hình của bạn biến mất trừ khi bạn sao chép CSS trước.

Lịch sử ngắn về Flexbox

• Hỗn loạn bố cục CSS 2.1, 1998 đến 2008.Trước Flexbox, các nhà phát triển web sử dụng float: left với các hack clearfix, display: inline-block với lỗi khoảng trắng, hoặc display: table với các thủ thuật table-cell cho bố cục. Căn giữa theo chiều dọc đòi hỏi vertical-align trên các table-cell, thủ thuật lề âm, hoặc định vị tuyệt đối. Cột bằng nhau đòi hỏi JavaScript. Cộng đồng web tạo ra hàng nghìn bài đăng blog về các giải pháp tạm thời kiểu cách thực hiện X với CSS.
• Bản nháp Flexible Box đầu tiên, 2009.W3C CSS Working Group xuất bản Working Draft đầu tiên của CSS Flexible Box Layout Module vào tháng 7 năm 2009, với ba cú pháp tiến hóa trong năm năm tiếp theo: cú pháp box-* ban đầu (bị deprecated nhanh chóng), cú pháp trung gian flexbox 2011 (vẫn thấy trong mã legacy IE 10), và cú pháp flex cuối cùng mà chúng ta sử dụng ngày nay.
• Hỗ trợ trình duyệt ổn định, 2014.Chrome 29, Firefox 28, Safari 9, và IE 11 đều phát hành Flexbox hoạt động vào năm 2014, với IE 11 vẫn giữ lại các trường hợp tới hạn có lỗi. Sự chuyển đổi từ Flexbox là tương lai sang Flexbox là hiện tại diễn ra vào năm 2014-2015 khi các trang sản xuất chấp nhận nó cho các bố cục chính. Bố cục Chén Thánh (header, footer, hai sidebar, nội dung chính) trở nên tầm thường.
• Hướng dẫn đầy đủ về Flexbox của Chris Coyier, 2013.CSS-Tricks xuất bản hướng dẫn Flexbox toàn diện của Chris Coyier (tháng 4 năm 2013), trở thành tài liệu tham khảo kinh điển. Đến năm 2016, hướng dẫn nằm trong số các kết quả hàng đầu cho bất kỳ câu hỏi Flexbox nào và được dịch sang hàng chục ngôn ngữ. Nó tăng tốc đáng kể việc áp dụng Flexbox.
• CSS Grid đến như một bổ sung, 2017.CSS Grid Layout phát hành trong Chrome 57, Firefox 52 và Safari 10.1 (tháng 3 năm 2017). Thay vì thay thế Flexbox, Grid bổ sung cho nó: Flexbox xuất sắc trong các bố cục hàng/cột một chiều, Grid xuất sắc trong các bố cục hai chiều. Các thiết kế hiện đại thường sử dụng cả hai: Grid cho cấu trúc cấp trang, Flexbox cho các sắp xếp nội bộ thành phần (mục nav, nhóm nút, nội dung thẻ).
• Thuộc tính gap và subgrid xuất hiện, 2020 đến 2024.Thuộc tính gap (ban đầu chỉ dành cho Grid) trở nên tương thích với Flexbox trên tất cả các trình duyệt chính vào Safari 14.1 (tháng 4 năm 2021). Cú pháp gap: 1rem sạch hơn thay thế các mẫu lề trên mọi con trừ cái cuối cũ hơn. CSS Subgrid (2023+) cho phép các grid lồng nhau căn chỉnh với các track của grid cha, hữu ích cho các bố cục hệ thống thiết kế.

Quy trình làm việc thực tế

• Thanh điều hướng.Một nav ngang với logo ở bên trái và link ở bên phải là trường hợp sử dụng kinh điển của Flexbox. display: flex; justify-content: space-between; align-items: center; trên container nav, và bạn đã xong. Thêm gap: 1.5rem để có khoảng cách giữa các link. CSS 4 dòng này thay thế những gì từng đòi hỏi float, clearfix và toán học lề pixel-perfect.
• Căn giữa theo chiều dọc và chiều ngang.Câu hỏi cổ điển làm thế nào để tôi căn giữa div này? có câu trả lời Flexbox: display: flex; justify-content: center; align-items: center; trên cha. Hoạt động bất kể kích thước nội tại của con, bất kể chiều cao của cha, bất kể thay đổi nội dung động. Đây là sự cải thiện đơn lẻ lớn nhất về chất lượng cuộc sống mà Flexbox mang lại cho phát triển web.
• Bố cục danh sách thẻ với gói.Một hàng thẻ gói thành nhiều hàng trên màn hình hẹp: display: flex; flex-wrap: wrap; gap: 1rem; trên container, và flex: 1 1 250px trên mỗi thẻ. Các thẻ phát triển để lấp đầy không gian có sẵn, co lại đến tối thiểu 250px và gói thành hàng mới khi 250px không vừa. Thiết kế đáp ứng không có media query.
• Hàng biểu mẫu với các đầu vào có nhãn.Các biểu mẫu thường cần nhãn và đầu vào được căn chỉnh: display: flex; gap: 0.5rem; trên hàng, flex: 0 0 120px trên nhãn (chiều rộng cố định 120px), flex: 1 trên đầu vào (lấp đầy không gian còn lại). Thay đổi kích thước container biểu mẫu giữ nhãn cố định và kéo dài đầu vào. Dễ hơn CSS Grid cho các hàng biểu mẫu hai cột.
• Footer dính.Làm cho footer dính vào dưới cùng của viewport khi nội dung ngắn, nhưng theo nội dung khi dài: body { display: flex; flex-direction: column; min-height: 100vh; } với main { flex: 1 } đẩy footer xuống. Vấn đề footer dính kinh điển được giải quyết trong ba khai báo CSS, thay thế các giải pháp tạm thời lề âm của những năm 2010.
• Nhóm tag và badge.Danh sách các tag, chip, hoặc badge nên chảy theo chiều ngang và gói thành các dòng mới: display: flex; flex-wrap: wrap; gap: 0.5rem;. Mỗi tag tự định kích thước, và container xử lý sắp xếp. Được sử dụng nhiều trong UI lọc, gắn tag nội dung, giao diện tìm kiếm. Kết hợp tốt với selector :has() cho styling phụ thuộc trạng thái.

Cạm bẫy phổ biến và ý nghĩa của chúng

• Cái bẫy min-width: auto.Các mục flex có min-width: auto ngầm định (hoặc min-height: auto cho hướng cột) ngăn chúng co lại dưới kích thước tối thiểu nội tại của nội dung. Điều này khiến các mẫu overflow: hidden và text-truncation thất bại bất ngờ bên trong container flex. Sửa: đặt rõ ràng min-width: 0 trên mục flex có vấn đề. Đây là nguyên nhân phổ biến nhất của tại sao bố cục flex của tôi bị hỏng?.
• Nhầm lẫn flex-basis vs width.flex-basis là kích thước ban đầu của một mục flex dọc theo trục chính, trước khi tính toán grow/shrink. width (hoặc height cho hướng cột) là kích thước CSS thông thường. Khi cả hai được đặt, flex-basis thắng. Shorthand flex: 1 1 200px đặt flex-basis thành 200px. Đối với hầu hết các trường hợp, ưu tiên flex-basis hơn width bên trong container flex để rõ ràng.
• Hỗ trợ gap trong các trình duyệt cũ.Thuộc tính gap ban đầu chỉ dành cho Grid và đến Flexbox gần đây hơn: Safari 14.1 (tháng 4 năm 2021), và sớm hơn trong Chrome/Firefox. Đối với các dự án hỗ trợ Safari cũ (hoặc WebView cũ trong các ứng dụng iOS), cung cấp fallback bằng cách sử dụng lề trên các con. Hầu hết các dự án hiện đại có thể an toàn sử dụng gap; kiểm tra mục tiêu hỗ trợ trình duyệt cụ thể của bạn.
• Flex-shrink mặc định có thể gây ra kích thước bất ngờ.Các mục flex mặc định là flex-shrink: 1, có nghĩa là chúng có thể co lại dưới chiều rộng đã khai báo nếu container quá hẹp. Để giữ một phần tử ở chiều rộng đã khai báo bất kể không gian có sẵn, đặt flex-shrink: 0. Phổ biến với các sidebar nên giữ rộng 250px ngay cả khi khu vực nội dung chính đẩy chúng: flex: 0 0 250px thay vì flex-basis: 250px.
• Flex-basis phần trăm tương đối với container.flex-basis: 50% có nghĩa là 50% kích thước trục chính của container flex. Điều này hoạt động cho các bố cục điển hình nhưng tương tác lạ với flex-wrap: nếu chính container có kích thước trục chính dựa trên phần trăm trong ngữ cảnh flex lồng nhau, toán học trở nên phức tạp. Khi nghi ngờ, sử dụng giá trị pixel hoặc min()/max()/clamp() cho flex-basis thay vì phần trăm.
• Flexbox IE 11 có các trường hợp tới hạn lỗi.Internet Explorer 11 (đã nghỉ hưu tháng 6 năm 2022) đã triển khai Flexbox với một số lỗi: min-height không được tôn trọng, container flex lồng nhau bị hỏng, flex: 1 đôi khi xử lý flex-basis như 0px thay vì 0%, shorthand flex hai giá trị được xử lý không nhất quán. Đối với các dự án không còn hỗ trợ IE, bỏ qua. Đối với phần mềm doanh nghiệp legacy, kiểm tra kỹ lưỡng hoặc sử dụng các phương pháp bố cục thay thế.

Quyền riêng tư: mọi thứ chạy trong trình duyệt của bạn

Các công cụ học và bố cục CSS đến trong hai hương vị: các trang HTML đơn giản chạy JavaScript phía client (riêng tư, nhanh, không thiết lập) và các trình chỉnh sửa đám mây với các dự án được lưu (cộng tác nhưng với sự đánh đổi về quyền riêng tư). Công cụ này thuộc loại đầu tiên. Các lựa chọn thuộc tính của bạn, cấu hình mục của bạn, CSS được tạo của bạn: tất cả đều ở trong phiên trình duyệt của bạn. Tải lại trang và trạng thái biến mất trừ khi bạn sao chép CSS trước.

Cổ phần quyền riêng tư ở đây thấp vì cấu hình Flexbox hiếm khi chứa thông tin nhạy cảm. Tuy nhiên, sự thiếu phân tích quan trọng: bạn có thể thử nghiệm tự do mà không có quá trình thử và sai của bạn được ghi lại. Đặc biệt hữu ích trong các bối cảnh lớp học hoặc đào tạo doanh nghiệp nơi việc học sinh hoặc thực tập sinh đăng ký tài khoản trên các nền tảng bên thứ ba là một điểm ma sát. Công cụ là một trang tĩnh duy nhất không có backend, có thể sử dụng trong bất kỳ trình duyệt nào, bao gồm các máy doanh nghiệp bị khóa.

Khi một công cụ khác là lựa chọn đúng

• CSS Grid cho bố cục hai chiều.Flexbox một chiều; nếu bạn cần căn chỉnh các mục đồng thời trong cả hàng và cột (ví dụ: bố cục kiểu tạp chí với các thẻ có kích thước hỗn hợp), CSS Grid phù hợp hơn nhiều. Sử dụng CSS Grid Generator của chúng tôi cho loại công việc đó. Hai cái này hoạt động tốt cùng nhau: Grid cho cấu trúc cấp trang, Flexbox cho các sắp xếp nội bộ thành phần.
• Bảng HTML cho dữ liệu dạng bảng.Nếu dữ liệu của bạn thực sự là một bảng (các hàng đại diện cho bản ghi, các cột đại diện cho trường), hãy sử dụng phần tử thực với và

  . Các bảng cung cấp ý nghĩa ngữ nghĩa cho người đọc màn hình, các tiêu đề có thể sắp xếp và căn chỉnh tích hợp. Flexbox/Grid cho bảng là một antipattern thời 2010; các hướng dẫn về khả năng tiếp cận hiện đại khuyến nghị rõ ràng các bảng HTML ngữ nghĩa cho dữ liệu dạng bảng. position: absolute cho overlay và tooltip.Modal overlay, tooltip, menu dropdown và các phần tử UI nổi tương tự hoạt động tốt nhất với position: absolute hoặc position: fixed hơn là Flexbox. Flex/Grid quản lý dòng bố cục; định vị tuyệt đối nâng các phần tử hoàn toàn ra khỏi dòng. Kết hợp chúng: Flexbox cho bố cục chính của trang, định vị tuyệt đối cho modal phủ lên nó. CSS Subgrid cho căn chỉnh lồng nhau.Khi các bố cục lồng nhau cần căn chỉnh với grid của cha (ví dụ: tiêu đề thẻ tất cả căn chỉnh trên một grid thẻ), CSS Subgrid (Firefox 71 2019, Chrome 117 2023, Safari 16 2022) phù hợp hơn Flexbox lồng nhau. Subgrid cho phép các con kế thừa các track grid từ cha, đảm bảo căn chỉnh hoàn hảo trên các cấu trúc lồng nhau. Đáng học cho công việc thành phần hệ thống thiết kế. Các câu hỏi thường gặp khác Shorthand flex chính xác có nghĩa gì? Shorthand flex đặt ba thuộc tính cùng một lúc: flex: . Các giá trị phổ biến: flex: 1 (1, 1, 0%) cho các mục phân phối bằng nhau, flex: 0 0 auto cho các mục kích thước cố định, flex: 1 1 250px cho các mục phát triển/co lại từ điểm xuất phát 250px. Shorthand có các giá trị ban đầu đặc biệt khi chỉ cung cấp một hoặc hai giá trị; dạng ba giá trị rõ ràng tránh bất ngờ. Làm thế nào để tôi làm cho các mục gói thành nhiều hàng? Đặt flex-wrap: wrap trên container. Các mục tràn sang dòng mới khi không vừa. Kết hợp với flex-basis trên các mục để kiểm soát có bao nhiêu vừa mỗi hàng: flex: 1 1 200px tạo ra một grid đáp ứng nơi các mục ít nhất 200px, phát triển để lấp đầy không gian còn lại, và gói thành hàng mới trên màn hình hẹp. Thuộc tính gap của container xử lý khoảng cách giữa các hàng được gói và các mục. Tôi có thể đảo ngược thứ tự các mục flex không? Có, nhiều cách. Cấp container: flex-direction: row-reverse (hoặc column-reverse) đảo ngược tất cả các mục theo thứ tự. Cấp mục: thuộc tính order gán trọng số số; các mục với số thấp hơn xuất hiện trước. Thứ tự mặc định là 0; đặt order: -1 trên một mục di chuyển nó lên phía trước. Lưu ý về khả năng tiếp cận: sắp xếp lại trực quan không ảnh hưởng đến thứ tự tab hoặc thứ tự đọc của người đọc màn hình, điều này có thể gây nhầm lẫn cho người dùng bàn phím và công nghệ hỗ trợ. Sử dụng có chừng mực. Sự khác biệt giữa align-items và align-content là gì? align-items căn chỉnh các mục bên trong hàng (hoặc cột) của chúng dọc theo trục chéo. align-content căn chỉnh chính các hàng (hoặc cột) bên trong container, chỉ có ý nghĩa khi có nhiều dòng được gói. Nếu flex-wrap được đặt thành nowrap (mặc định), align-content không có tác dụng vì chỉ có một dòng. Sử dụng align-items cho căn chỉnh một dòng, align-content cho căn chỉnh đa dòng. Làm thế nào để tôi căn giữa một phần tử duy nhất với Flexbox? Câu trả lời kinh điển: display: flex; justify-content: center; align-items: center; trên container cha. Điều này căn giữa con cả theo chiều ngang và chiều dọc. Chỉ ngang: chỉ sử dụng justify-content: center. Chỉ dọc: chỉ sử dụng align-items: center. Nếu bạn cần căn giữa bên trong một cha có chiều cao không xác định, thêm min-height: 100vh vào cha để nó có không gian dọc để căn giữa bên trong. Toàn bộ mẫu thay thế 20 năm giải pháp căn giữa CSS. Tại sao việc cắt ngắn văn bản của tôi không hoạt động trong container flex? Bởi vì min-width: auto mặc định trên các mục flex. Text-overflow: ellipsis yêu cầu phần tử thực sự tràn container của nó; với chiều rộng tối thiểu mặc định được đặt thành kích thước nội tại của nội dung, phần tử không bao giờ tràn. Sửa: thêm min-width: 0 vào mục flex chứa văn bản cắt ngắn. Đây là bug Flexbox phổ biến nhất từ trước đến nay trong các câu trả lời Stack Overflow: tìm kiếm flex text-overflow ellipsis not working trả về hàng nghìn phiên bản của chính câu trả lời này. Công cụ liên quan 🎨 Gradient CSS 🖼️ Box-shadow ⬜ Border-radius 📐 Đơn vị CSS