Sức mạnh đáng kinh ngạc của Flexbox

Sep 17, 2025

Cách

Flexbox, hoặc bố cục hộp linh hoạt, là một mô-đun bố cục CSS mạnh mẽ cung cấp cho các nhà thiết kế và nhà phát triển web một cách hiệu quả và đơn giản để bố trí, căn chỉnh và phân phối các yếu tố trong một thùng chứa. Nó giải quyết nhiều vấn đề bố trí chúng ta đã gặp khó khăn để giải quyết trong một thời gian dài.

Khái niệm cơ bản về Flexbox

Ở dạng cơ bản nhất, Flexbox được tạo thành từ hai yếu tố: Hộp đựng Flex (hoặc Phụ huynh Flex) và các mặt hàng Flex (Flex Children). Một container flex là một yếu tố chứa (như một div. ) Cho thuộc tính hiển thị flex. . Các mục Flex là các yếu tố trẻ em của một thùng chứa flex, có thể được thao tác thông qua các thuộc tính hiển thị khác nhau.

Các thùng chứa Flex và các mục Flex Mỗi phần có phạm vi thuộc tính riêng có thể được kết hợp theo nhiều cách khác nhau để tạo ra một loạt các bố cục phức tạp. Các mục bên trong một thùng chứa Flex có thể được đặt ra theo chiều ngang hoặc theo chiều dọc, căn chỉnh và phân phối theo nhiều cách khác nhau, và kéo dài hoặc thu nhỏ để phù hợp với không gian có sẵn. Tất cả các tùy chọn này cho phép bạn dễ dàng tạo bố cục đáp ứng.

Cách sử dụng Flexbox

Để bắt đầu sử dụng Flexbox, trước tiên bạn cần tạo Container Flex của mình (phần tử gốc sẽ chứa các mục Flex của bạn). Trong ví dụ này, chúng tôi sẽ sử dụng một div. khối. Trước khi chúng ta phong cách yếu tố, hãy thêm ba lần nữa div. Các khối bên trong container flex của chúng tôi để hoạt động như các mục flex. Tại thời điểm này, các mục sẽ được xếp chồng lên nhau.

Với Divs con của chúng tôi, chúng tôi có thể đặt thuộc tính hiển thị của container của cha mẹ thành flex. .

 Flex Container {
Hiển thị: Flex;
}

Hướng dẫn bố trí

Hướng bố cục chỉ đơn giản là hướng yếu tố của bạn sẽ phân phối. Hướng mặc định của một container flex là hàng , sẽ hiển thị các yếu tố trẻ em theo chiều ngang. Bạn có thể chuyển layout thành dọc bằng cách đặt hướng thành cột .

 Flex Container {
Hiển thị: Flex;
Hướng dẫn linh hoạt: Hàng;
Không thể

Container flex {
Hiển thị: Flex;
Hướng dẫn: Cột;
}

Bất kỳ hướng nào bạn đặt trên hộp chứa flex của bạn được gọi là hướng 'chính', trong khi hướng khác mà bạn không chọn trở thành hướng 'chéo'. Do đó, theo mặc định, hướng chính sẽ nằm ngang và hướng chéo sẽ là dọc.

Flexbox cũng cho phép bạn đảo ngược bố cục. Khi đảo ngược, trẻ em của một container flex sẽ được đặt từ phải sang trái (nếu hướng là hàng ) hoặc từ dưới lên trên (nếu hướng là cột ).

 Flex Container {
Hiển thị: Flex;
Flex-Direction: Row-Reverse;
Không thể

Container flex {
Hiển thị: Flex;
Flex-Outhion: Cột-Đảo ngược;
}

Điều này có thể có ích nếu bạn muốn đảo ngược bố cục trên màn hình nhỏ hơn.

Ví dụ: giả sử trên màn hình máy tính để bàn bạn muốn hiển thị văn bản ở bên trái màn hình và hình ảnh bên phải (xem hình ảnh ván lướt ở trên). Trên điện thoại di động, điều này sẽ di chuyển hình ảnh bên dưới văn bản. Bằng cách đảo ngược hướng, bạn có thể đảm bảo rằng hình ảnh xuất hiện phía trên văn bản thay thế.

Điều chỉnh căn chỉnh

Cài đặt của Flexbox cũng cung cấp cho bạn hai phương thức khác nhau để căn chỉnh nội dung: theo chiều dọc và chiều ngang. Dưới đây là các tùy chọn căn chỉnh theo chiều ngang của bạn cho các mục bên trong một thùng chứa flex:

flex-start. : Các mục được đặt về phía đầu hàng (trái, trừ khi bạn đã đảo ngược bố cục)

trung tâm : Các mặt hàng tập trung trong hàng

flex-end. : Các mục được đặt vào cuối hàng (phải, trừ khi bạn đã đảo ngược bố cục)

không gian giữa : Các mặt hàng được phân phối đều dọc theo hàng

không gian xung quanh : Các mục được phân phối đều dọc theo hàng, với không gian bằng nhau ở hai bên của mỗi phần tử

Vì vậy, mã có thể trông như thế này:

 Flex Container {
Hiển thị: Flex;
Hướng dẫn linh hoạt: Hàng;
Căn chỉnh nội dung: Flex-Start | flex-end | Trung tâm |. không gian giữa | không gian xung quanh | căng ra;
}

Dưới đây là các tùy chọn căn chỉnh dọc của bạn cho các mục trong một thùng chứa flex:

flex-start. : Các mục được căn chỉnh theo đỉnh của hàng

trung tâm : Các mặt hàng được tập trung trong hàng

flex-end. : Các mục được liên kết với dưới cùng của hàng

căng ra : Các mặt hàng kéo dài qua chiều cao của hàng

Đường cơ sở : Các mặt hàng được căn chỉnh theo đường cơ sở của họ (dòng tưởng tượng mà văn bản ngồi trên)

Mã có thể trông như thế này:

 Flex Container {
Hiển thị: Flex;
Hướng dẫn linh hoạt: Hàng;
Căn chỉnh các mặt hàng: Flex-start | flex-end | Trung tâm |. Đường cơ sở |. căng ra;
}

Theo mặc định, trẻ em của một container Flex sẽ luôn cố gắng phù hợp với một dòng duy nhất. Nếu bạn muốn thay đổi điều này, bạn có thể thêm bao bọc thuộc tính. Điều này cho phép trẻ em bọc một dòng mới nếu chúng hết không gian.

 Flex Container {
Hiển thị: Flex;
Flex-Wrap: Wrap;
}

Các mặt hàng Flex cũng có được các thuộc tính dựa trên Flex của riêng họ. Khi một phần tử được đặt bên trong hộp chứa Flex, nó sẽ tự động trở thành một đứa trẻ uốn cong và được cấp bộ các kiểu CSS dựa trên Flex của riêng mình. Những phong cách kiểm soát kích thước, căn chỉnh và thứ tự hiển thị.

Kích thước flex.

Flex Children có thể thay đổi chiều rộng hoặc chiều cao của chúng (tùy thuộc vào hướng bố cục của container) để lấp đầy không gian có sẵn.

WebFlow cung cấp cho bạn ba tùy chọn đặt trước cho kích thước flex: co lại nếu cần, điền không gian trống và không thu nhỏ. Lưu ý rằng mỗi phần tử trẻ em có thể có cài đặt riêng, cho phép rất nhiều tùy chọn thiết kế.

 Mục flex {
Flex-Shrink: & lt; số & gt ;;
FLEX-GROW: & LT; SỐ & GT ;;
cơ sở flex: & lt; chiều dài & gt; | Tự động;
}

Chúng ta hãy xem những gì mỗi tùy chọn này làm:

Co lại nếu cần: Kích thước vật phẩm dựa trên chiều rộng / chiều cao của nó hoặc nội dung của nó. Mục sẽ không phát triển lớn hơn nó cần, nhưng có thể thu nhỏ đến kích thước tối thiểu của nó để ngăn tràn tràn
Điền vào chỗ trống: Cho phép mục mở rộng để điền vào tất cả không gian có sẵn bên trong cha mẹ của nó. Nếu bạn đặt mục này trên tất cả các mục trong một thùng chứa flex, chúng sẽ mở rộng để chiếm số lượng không gian trống bằng nhau
Đừng co lại: Kích thước vật phẩm dựa trên chiều rộng / chiều cao hoặc nội dung của nó, nhưng không cho phép nó co lại, ngay cả khi điều đó sẽ gây ra tràn

Các mục Flex cũng có thể có cài đặt căn chỉnh riêng của chúng, ghi đè lên căn chỉnh mặc định được đặt bởi container Flex gốc của chúng. Những sự sắp xếp này hành xử như được giải thích trước đây.

 Mục flex {
Hiển thị: Flex;
Hướng dẫn linh hoạt: Hàng;
Căn chỉnh các mặt hàng: Flex-start | flex-end | Trung tâm |. Đường cơ sở |. căng ra;
}

Theo mặc định, các mục Flex hiển thị theo thứ tự tương tự như chúng xuất hiện trong mã nguồn. Với Flexbox, bạn có thể ghi đè hành vi này để đảm bảo các yếu tố hiển thị theo chính xác thứ tự bạn muốn.

Bốn tùy chọn chính bạn có thể sử dụng ở đây:

Tự động : Giá trị mặc định, đơn đặt hàng các mục như trong nguồn
Đầu tiên : Mục xuất hiện đầu tiên trong container flex của nó
Cuối cùng : Mục xuất hiện cuối cùng trong hộp đựng flex của nó
Tập quán : Bạn có thể tùy chỉnh đơn hàng, mục của bạn sẽ được hiển thị trong

Đơn hàng tùy chỉnh có thể được định nghĩa là một số, chỉ định thứ tự, trong đó mục Flex xuất hiện bên trong hộp chứa Flex.

 Mục flex {
Đặt hàng: & lt; INTEGER & GT ;;
}

Tại sao tôi nên sử dụng nó?

Tôi rất vui vì bạn đã hỏi! Sử dụng Flexbox cho phép bạn dễ dàng tạo các bố cục đáp ứng đã rất khó (hoặc không thể) để tạo bằng các mô-đun bố cục CSS cũ hơn.

Hãy xem các ví dụ trong hình ảnh bên dưới - nhiều trong số đó có lẽ bạn đã thấy trên web. Hầu như tất cả chúng sẽ mất một lượng CSS đáng kể (đặc biệt là trên các kích thước màn hình khác nhau), nhưng chỉ mất một vài dòng đơn giản để đạt được với Flexbox. Để xem những ví dụ này trong hành động, hãy truy cập flexbox.webflow.com. .

Sức mạnh đáng kinh ngạc của Flexbox

Khái niệm cơ bản về Flexbox

Cách sử dụng Flexbox

Hướng dẫn bố trí

Điều chỉnh căn chỉnh

Kích thước flex.

Tại sao tôi nên sử dụng nó?

Cách - Các bài báo phổ biến nhất

8 Hướng dẫn thiết kế đồ họa mới tuyệt vời

Cách điêu khắc mũi người trong ZBrush: 4 bước dễ dàng

4 bước dễ dàng để cải thiện kết xuất của bạn

Cách trộn bút chì màu

Tạo logo trong Illustrator

Tạo bảng điều khiển đáp ứng với Figma

Làm sắc nét kỹ năng vẽ tranh tĩnh lặng của bạn

Khám phá mã sáng tạo với P5.js

Thể loại