Chuyển đến nội dung
Numio

Trình tạo Flexbox

Sắp xếp bố cục flex thực tế. Điều chỉnh vùng chứa và từng phần tử, thử các độ rộng khác nhau, rồi lấy mã CSS, HTML hoặc Tailwind.

Xem trước trực tiếp

960 × 320 px · Chọn một phần tử trong bản xem trước để chỉnh sửa.

Phần tử 1
Phần tử 2
Phần tử 3

Phần tử

Tối đa 12 phần tử. Cần có ít nhất một phần tử.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 16px;
  padding: 24px;
  height: 320px;
  box-sizing: border-box;
}

.item-1 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 180px;
  order: 0;
  align-self: auto;
  min-width: 0;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 12px;
  overflow-wrap: anywhere;
  background: #dbeafe;
  color: #172554;
}

.item-2 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 180px;
  order: 0;
  align-self: auto;
  min-width: 0;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 12px;
  overflow-wrap: anywhere;
  background: #bfdbfe;
  color: #172554;
}

.item-3 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 180px;
  order: 0;
  align-self: auto;
  min-width: 0;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 12px;
  overflow-wrap: anywhere;
  background: #93c5fd;
  color: #172554;
}

Mọi dữ liệu đều nằm trong trình duyệt của bạn.

Tài liệu tham khảo về định dạng

Trang công cụ được cập nhật: