Tạo bố cục Flexbox hoàn hảo

Trực quan, tùy chỉnh và tạo mã flexbox CSS với giao diện kéo và thả trực quan của chúng tôi.

Thuộc tính Container

display

flex-direction

flex-wrap

justify-content

align-items

align-content

Thuộc tính mặt hàng

Items

3 items

Mục đã chọn

flex-grow

flex-shrink

flex-basis

order

align-self

Preview

Item 1

Item 2

Item 3

.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

Mã CSS được tạo

Cài đặt trước Flexbox phổ biến

Căn giữa theo chiều ngang và chiều dọc

Content

Hoàn hảo để căn giữa logo, nút hoặc bất kỳ yếu tố nào theo cả chiều ngang và chiều dọc.

Khoảng cách bằng nhau

Item 1

Item 2

Item 3

Tạo khoảng cách bằng nhau giữa các phần tử với khoảng cách giữa hoặc khoảng cách xung quanh.

Menu dọc

Home

About

Contact

Xây dựng menu điều hướng dọc với khoảng cách và căn chỉnh nhất quán.

Lưới đáp ứng

Box 1

Box 2

Box 3

Box 4

Box 5

Tạo bố cục lưới đáp ứng bao bọc các mục dựa trên không gian có sẵn.

Biểu ngữ anh hùng

Tiêu đề chính

Phần anh hùng với lời kêu gọi hành động

Thiết kế biểu ngữ anh hùng với tiêu đề, phụ đề và nút kêu gọi hành động.

Bố cục chân trang

Company

About Us

Careers

Support

Trung tâm trợ giúp

Liên hệ với chúng tôi

Xây dựng chân trang đáp ứng với các cột xếp chồng lên nhau trên màn hình nhỏ hơn.

Ví dụ trong thế giới thực

Thanh điều hướng

Logo

Home

Products

About

Contact

Bố cục thanh điều hướng phổ biến với logo ở bên trái, các mục menu ở giữa và biểu tượng giỏ hàng ở bên phải.

Card Grid

Tiêu đề thẻ

Văn bản mô tả thẻ tại đây

Tiêu đề thẻ

Văn bản mô tả thẻ tại đây

Tiêu đề thẻ

Văn bản mô tả thẻ tại đây

Lưới thẻ đáp ứng thích ứng với các kích thước màn hình khác nhau bằng cách sử dụng các thuộc tính flexbox.

Bố cục bài viết

Tiêu đề bài viết

Đăng vào Tháng Một 1, 2023 · Bài đọc 5 phút

Nội dung bài viết tại đây. Đây có thể là một bản tóm tắt ngắn gọn hoặc toàn bộ văn bản bài viết. Flexbox giúp căn chỉnh hình ảnh và văn bản theo cách hấp dẫn trực quan.

Bố cục bài viết phổ biến với hình ảnh ở bên trái và nội dung văn bản ở bên phải, xếp chồng lên nhau trên thiết bị di động.

Bố cục bảng điều khiển

Header

Sidebar

Nội dung chính

Footer

Bố cục bảng điều khiển với đầu trang, thanh bên, khu vực nội dung chính và chân trang sử dụng flexbox cho cả căn chỉnh ngang và dọc.

Nguyên tắc cơ bản về Flexbox

Flexbox là gì?

Flexible Box Layout, thường được gọi là Flexbox, là một mô hình bố cục CSS3 cung cấp một cách hiệu quả để phân phối và căn chỉnh không gian giữa các mục trong một vùng chứa, ngay cả khi kích thước của chúng không xác định hoặc động.

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

Các khái niệm chính:Flexbox giới thiệu hai khái niệm chính:Thùng chứa linh hoạt and the Các mục linh hoạt. Container là phần tử cha và các mục là phần tử trực tiếp của nó.

Trục chính vs Trục chéo

Bố cục Flexbox dựa trên hai trục:main axis and the trục chéo.

Trục chính:Trục chính dọc theo đó các mục uốn được bố trí. Được xác định bởiflex-direction.
Trục chéo:Trục vuông góc với trục chính. Hướng của nó phụ thuộc vào hướng trục chính.

→ trục chính

← trục chéo

Start

Main

End

Thuộc tính Container

Property	Description
`display`	Định nghĩa một vùng chứa linh hoạt; inline hoặc block tùy thuộc vào giá trị đã cho.
`flex-direction`	Thiết lập trục chính, do đó xác định hướng các mục flex được đặt trong flex container.
`flex-wrap`	Theo mặc định, tất cả các mục flex sẽ cố gắng phù hợp với một dòng. Bạn có thể thay đổi điều đó và cho phép các mục được bao bọc khi cần thiết với thuộc tính này.
`justify-content`	Căn chỉnh các mục flex dọc theo trục chính của dòng hiện tại của vùng chứa flex.
`align-items`	Căn chỉnh các mục flex dọc theo trục chéo của dòng hiện tại của vùng chứa flex.
`align-content`	Căn chỉnh các đường của vùng chứa linh hoạt bên trong khi có thêm không gian trong trục chéo.

Thuộc tính mặt hàng

Property	Description
`order`	Theo mặc định, các mục linh hoạt được bố trí theo thứ tự nguồn. Tuy nhiên,`order`thuộc tính kiểm soát thứ tự mà chúng xuất hiện trong vùng chứa linh hoạt.
`flex-grow`	Xác định khả năng phát triển của một mục linh hoạt nếu cần. Nó chấp nhận một giá trị không đơn vị đóng vai trò như một tỷ lệ.
`flex-shrink`	Xác định khả năng thu nhỏ một mục linh hoạt nếu cần.
`flex-basis`	Xác định kích thước ban đầu của một mục linh hoạt trước khi bất kỳ không gian khả dụng nào được phân phối theo các yếu tố linh hoạt.
`align-self`	Cho phép căn chỉnh mặc định (hoặc căn chỉnh được chỉ định bởi`align-items`) để ghi đè cho các mục linh hoạt riêng lẻ.

Related Tools

Tạo bố cục Flexbox hoàn hảo

Trực quan, tùy chỉnh và tạo mã flexbox CSS với giao diện kéo và thả trực quan của chúng tôi.

Công cụ chuyển đổi Stylus sang CSS

Chuyển đổi mã SCSS của bạn thành CSS. Nhanh chóng, dễ dàng và an toàn.

Công cụ chuyển đổi SCSS sang CSS

Chuyển đổi mã SCSS của bạn thành CSS. Nhanh chóng, dễ dàng và an toàn.

Trình thu nhỏ CSS

Nén và tối ưu hóa mã CSS của bạn với độ chính xác chuyên nghiệp

Số thập phân sang Hex

Chuyển đổi số thập phân sang thập lục phân một cách dễ dàng

Tạo bố cục Flexbox hoàn hảo

Trực quan, tùy chỉnh và tạo mã flexbox CSS với giao diện kéo và thả trực quan của chúng tôi.