Sân chơi CSS Flexbox & Grid

Sân chơi CSS Flexbox & Grid là gì?

Sân chơi CSS Flexbox & Grid là một hộp cát trực quan miễn phí để học và tạo nguyên mẫu hai mô hình bố cục chính của CSS, dành cho các nhà phát triển front-end, học viên và nhà thiết kế. Chọn Flex hoặc Grid bằng nút chuyển chế độ, sau đó đặt các thuộc tính vùng chứa bằng các menu thả xuống đơn giản và ô nhập số: ở chế độ Flex bạn kiểm soát flex-direction, flex-wrap, justify-content và align-items; ở chế độ Grid bạn xác định bao nhiêu cột và hàng (được hiển thị dưới dạng repeat(n, 1fr)) cùng với justify-items và align-items. Một giá trị gap và một số lượng mục áp dụng cho cả hai. Bản xem trước trực tiếp gồm các ô được đánh số cho thấy chính xác cách căn chỉnh và khoảng cách của bạn hoạt động, và toàn bộ quy tắc .container CSS được tạo để bạn sao chép. Hãy dùng nó bất cứ khi nào bạn muốn xem một thiết lập flex hoặc grid thực sự trông như thế nào trước khi dán vào dự án của mình.

Cách sử dụng Sân chơi CSS Flexbox & Grid

1. Chọn Flex hoặc Grid bằng nút chuyển chế độ để quyết định xây dựng mô hình bố cục nào.
2. Ở chế độ Flex, đặt flex-direction, flex-wrap, justify-content và align-items từ các menu thả xuống.
3. Ở chế độ Grid, đặt số lượng cột và hàng, cùng với justify-items và align-items.
4. Mở Cài đặt để thay đổi gap (khoảng cách tính bằng px) và số lượng mục hiển thị trong bản xem trước.
5. Quan sát bản xem trước ô sắp xếp lại khi bạn thay đổi từng thuộc tính.
6. Sao chép quy tắc .container CSS được tạo và dán vào bảng định kiểu của bạn.

Ví dụ

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · columns 3 · rows 2 · justify-items start · align-items stretch · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · direction column · justify-content space-between · align-items stretch · gap 8

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

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

Sự khác biệt giữa Flexbox và Grid ở đây là gì?

Chế độ Flex sắp xếp các mục dọc theo một trục duy nhất và cung cấp flex-direction, flex-wrap, justify-content và align-items. Chế độ Grid sắp xếp các mục trong một lưới hai chiều bằng grid-template-columns và grid-template-rows (viết dưới dạng repeat(n, 1fr)) cùng với justify-items và align-items. Chuyển chế độ bằng nút chuyển để so sánh cách mỗi mô hình xử lý cùng một kiểu căn chỉnh.

Giá trị gap có tác dụng gì?

Gap thiết lập, theo pixel, khoảng cách giữa mỗi mục trong cả bố cục Flex lẫn Grid thông qua thuộc tính CSS gap. Tăng nó để tách các ô ra hoặc đặt thành 0 cho một bố cục sát nhau; bản xem trước và CSS được tạo đều cập nhật ngay lập tức.

Tại sao justify-content và align-items được viết khác nhau trong Grid?

Grid dùng các từ khóa start, end, center và stretch cho justify-items và align-items, trong khi Flex dùng flex-start và flex-end. Công cụ xuất ra các từ khóa đúng cho chế độ bạn đang dùng, nên CSS được sao chép luôn hợp lệ.

Tôi có thể thay đổi số lượng mục được hiển thị không?

Có. Mở Cài đặt và thay đổi số lượng mục để thêm hoặc bớt các ô xem trước được đánh số (tối đa 24). Điều này chỉ ảnh hưởng đến phần minh họa trên màn hình; CSS được tạo mô tả vùng chứa, không phải bản thân các mục.

Dữ liệu của tôi có được tải lên đâu đó không?

Không. Sân chơi chạy hoàn toàn trong trình duyệt của bạn bằng JavaScript, nên các cài đặt của bạn và CSS được tạo không bao giờ được gửi đến máy chủ. Nó hoạt động riêng tư và thậm chí ngoại tuyến sau khi trang đã được tải.