Công cụ tạo CSS Flexbox

Đặt trực quan flex-direction, wrap, justify-content, align-items, gap và flex, order, align-self cho từng item, với phần tử con hiển thị trực tiếp và mã CSS sao chép được.

Vùng chứa

flex-direction

flex-wrap

justify-content

align-items

align-content

gappx

align-content chỉ có tác dụng khi các phần tử xuống nhiều dòng.

Số phần tử

Phần tử 1

Chọn phần tử ở đây hoặc nhấp vào nó trong phần xem trước.

flex-grow

flex-shrink

order

flex-basis

align-self

Xem trước

Kéo góc dưới của phần xem trước để thay đổi kích thước vùng chứa.

Mã CSS

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

Công cụ Liên quan

Xem Tất cả

Tạo CSS Box Shadow Tạo CSS Gradient Tạo CSS Grid Tạo Border Radius Tạo Glassmorphism Tạo Neumorphism Tạo Text Shadow Tạo CSS Animation

Tạo CSS Flexbox là gì?

Sân chơi flexbox tương tác: đặt các thuộc tính của vùng chứa, thêm tối đa 12 phần tử con và tinh chỉnh flex-grow, flex-shrink, flex-basis, order và align-self cho từng phần tử. Phần xem trước áp dụng đúng mã CSS được tạo.

Cách sử dụng Tạo CSS Flexbox

Đặt vùng chứa: flex-direction, flex-wrap, justify-content, align-items, align-content và gap.
Chọn Số phần tử hiển thị trong phần xem trước.
Chọn một phần tử (bằng nút hoặc bấm trong phần xem trước) và đặt flex-grow, flex-shrink, flex-basis, order và align-self.
Đổi kích thước phần xem trước bằng cách kéo góc để xem bố cục phản ứng thế nào.
Sao chép mã CSS cho .container và các rule .item-n.

Ví dụ

Đầu vào

justify-content space-between, gap 16px; phần tử 2: flex-grow 1, order 2, align-self center

Đầu ra

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

.item-2 {
  flex: 1 1 auto;
  order: 2;
  align-self: center;
}

Khi nào nên dùng Tạo CSS Flexbox

Dùng flexbox cho bố cục một chiều: thanh điều hướng, thanh công cụ, nhóm nút, media object và căn giữa. Với bố cục trang hai chiều có cả hàng lẫn cột cùng lúc, công cụ tạo CSS Grid thường là lựa chọn tốt hơn.

Tạo CSS Flexbox hoạt động như thế nào

Vùng chứa luôn có display: flex cùng direction, wrap, justify-content và align-items. align-content chỉ được viết khi các phần tử có thể xuống dòng (nó không có tác dụng với một dòng duy nhất), và gap chỉ khi lớn hơn 0. Với các phần tử, chỉ những giá trị khác mặc định mới được viết: flex: grow shrink basis khi khác 0 1 auto, order khi khác 0 và align-self khi khác auto, dưới dạng các rule tên .item-1, .item-2… flex-basis không hợp lệ sẽ được đánh dấu và bỏ qua.