Nhà phát triển / Bố cục CSS

Sân chơi Flexbox: Điều khiển CSS cho vùng chứa và mục

Thử hướng flex, ngắt dòng, căn đều, căn chỉnh và khoảng cách, rồi điều chỉnh grow, shrink, basis, order và căn chỉnh của từng mục. Xem bố cục thay đổi và sao chép CSS.

Sân chơi Flexbox: Điều khiển CSS cho vùng chứa và mục: Hiển thị một vùng chứa flex trực tiếp với các thuộc tính mục có thể chỉnh sửa và phần giải thích ngắn bên cạnh mỗi tùy chọn. Bản xem trước có chiều cao cố định để làm rõ các hiệu ứng trên trục vuông góc. Bạn có thể dùng trình tạo CSS Grid để tạo bố cục lưới với các hàng và cột dùng chung. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.

Danh mục: Công cụ lập trình viên
Lượt chạy: Trong trình duyệt của bạn
Chi phí: Miễn phí · không cần đăng ký
Trạng thái khả dụng: Sẵn sàng sử dụng

Bộ thử bố cục FlexboxXử lý cục bộ

Chạy hoàn toàn trong trình duyệt của bạn

HướngĐặt trục chính và hướng của trục.Ngắt dòngCho phép thêm dòng khi các mục không vừa.Căn đều nội dungPhân bổ khoảng trống còn lại dọc theo trục chính.Căn chỉnh các mụcCăn chỉnh các mục trên trục vuông góc trong từng dòng.Căn chỉnh nội dungPhân bổ các dòng trên trục vuông góc khi việc ngắt dòng tạo ra nhiều dòng.Khoảng ngắt (px)Đặt khoảng cách giữa các mục và dòng liền kề.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
}
.item-1 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-2 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-3 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-4 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-5 { flex: 0 1 120px; order: 0; align-self: auto; }

Dùng flexbox cho hàng hoặc cột. Dùng CSS Grid khi cả hàng và cột đều cần các track dùng chung. Mở trình tạo CSS Grid

Mục đã chọn 1Co giãn tăngPhần tương đối của khoảng trống dương.Co lạiTrọng số co tương đối, nhân với kích thước cơ sở.Cơ sởKích thước ban đầu dọc theo trục chính trước khi tăng hoặc giảm.Thứ tựChỉ thay đổi thứ tự hiển thị; thứ tự đọc và thứ tự bàn phím vẫn giữ nguyên.Tự căn chỉnhGhi đè căn chỉnh trục vuông góc của vùng chứa đối với mục này.

Mô hình bố cục Flex

W3C CSS Flexible Box Layout Module Level 1: https://www.w3.org/TR/css-flexbox-1/ . Khoảng trống được phân bổ bằng trọng số co giãn và thu nhỏ của flex dọc theo trục chính.

Căn chỉnh và khả năng tiếp cận

Các khái niệm cơ bản về flexbox của MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox . Trục chéo vuông góc với trục chính; việc sắp xếp lại về mặt hình ảnh không thay đổi thứ tự của tài liệu.

Cách sử dụng

Thiết lập hướng, cách ngắt dòng và căn chỉnh của vùng chứa.
Nhấp vào một mục rồi thay đổi kích thước và căn chỉnh riêng của mục đó.
Thêm hoặc xóa mục, kiểm tra bố cục và sao chép CSS được tạo.

Quyền riêng tư và giới hạn

Cài đặt bố cục được xử lý cục bộ trong trình duyệt của bạn.

Công cụ liên quan

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

Tại sao align-content đôi khi không có tác dụng?

Thuộc tính này phân bổ các dòng flex. Để thấy tác dụng, cần bật ngắt dòng, có nhiều dòng và còn khoảng trống trên trục vuông góc.

order có thay đổi thứ tự của trình đọc màn hình không?

Không. Thuộc tính này chỉ thay đổi thứ tự hiển thị, còn thứ tự đọc tài liệu và thứ tự dùng bàn phím vẫn không đổi. Hãy duy trì thứ tự tài liệu hợp lý.

Khi nào tôi nên dùng Grid thay thế?

Hãy dùng Grid khi các hàng và cột cần dùng chung các track. Flexbox hữu ích khi sắp xếp các mục chủ yếu theo một trục.

Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản