Đã dùng gần đây

    Mở một công cụ và nó sẽ xuất hiện ở đây.

    Không gian thử nghiệm CSS Flexbox

    Không gian tương tác để học và tạo bố cục Flexbox

    Chia sẻ công cụ này

    Báo cáo sự cố

    Hãy mô tả sự cố mà không kèm dữ liệu nhập hoặc tệp riêng tư.

    Công cụ này hữu ích đến mức nào?

    Công cụ này hữu ích đến mức nào?

    Cài đặt bố cục

    Bố cục có sẵn

    Ghi đè theo từng phần tử

    Chọn một phần tử trong bản xem trước hoặc danh sách để chỉnh thuộc tính của nó.

    Tra cứu nhanh Flexbox

    Trục chính

    justify-content điều khiển việc căn chỉnh theo trục chính (do flex-direction xác định).

    Trục phụ

    align-items điều khiển việc căn chỉnh theo trục phụ (vuông góc với flex-direction).

    Nhiều dòng

    align-content chỉ có tác dụng khi flex-wrap được đặt là wrap hoặc wrap-reverse và có nhiều dòng.

    Xem trước trực tiếp

    CSS được tạo

    .container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 10px;
}

    Đổi cài đặt hoặc chọn một phần tử. Bản xem trước và CSS cập nhật cùng lúc.

    Giới thiệu về công cụ Không gian thử nghiệm CSS Flexbox

    Không gian thử nghiệm CSS Flexbox là công cụ trực quan, tương tác để học và thử nghiệm bố cục CSS Flexbox. Flexbox (Flexible Box Layout) là một trong những mô-đun bố cục CSS mạnh mẽ và được dùng rộng rãi nhất, được thiết kế để sắp xếp các phần tử trong một vùng chứa với hành vi linh hoạt, đáp ứng. Công cụ này cho phép bạn thao tác mọi thuộc tính của vùng chứa flex và phần tử flex theo thời gian thực, đồng thời thấy chính xác bố cục thay đổi ra sao.

    Thiết kế

    Mới thêm gần đây

    Tất cả công cụ

    Cài đặt quyền riêng tư

    Chọn tùy chọn của bạn cho phân tích, quảng cáo và cá nhân hóa. Bộ nhớ thiết yếu giúp các tính năng như giao diện và công cụ đã lưu tiếp tục hoạt động.

    Bộ nhớ thiết yếu luôn được bật.