Hướng dẫn Flexbox

Flexbox, còn được gọi là Mô-đun hộp linh hoạt, là một trong hai hệ thống bố cục hiện đại, cùng với CSS Grid

Giới thiệu

Flexbox, còn được gọi là Mô-đun Hộp linh hoạt, là một trong hai hệ thống bố cục hiện đại, cùng với CSS Grid.

So với CSS Grid (hai chiều), flexbox là mộtmô hình bố cục một chiều. Nó sẽ kiểm soát bố cục dựa trên một hàng hoặc trên một cột, nhưng không đồng thời với nhau.

Mục tiêu chính của flexbox là cho phép các mục lấp đầy toàn bộ không gian được cung cấp bởi vùng chứa của chúng, tùy thuộc vào một số quy tắc bạn đặt.

Trừ khi bạn cần hỗ trợ các trình duyệt cũ như IE8 và IE9, Flexbox là công cụ cho phép bạn quên việc sử dụng

  • Bố cục bảng
  • Phao
  • hack clearfix
  • display: tablehack

Hãy đi sâu vào flexbox và trở thành bậc thầy của nó trong thời gian rất ngắn.

Hỗ trợ trình duyệt

Tại thời điểm viết bài (tháng 2 năm 2018), nó được hỗ trợ bởi 97,66% người dùng, tất cả các trình duyệt quan trọng nhất đều triển khai nó từ nhiều năm nay, vì vậy ngay cả các trình duyệt cũ hơn (bao gồm IE10 +) cũng được bảo vệ:

Browser support

Trong khi chúng ta phải đợi một vài năm để người dùng bắt kịp CSS Grid, Flexbox là một công nghệ cũ hơn và có thể được sử dụng ngay bây giờ.

Bật Flexbox

Bố cục flexbox được áp dụng cho vùng chứa, bằng cách cài đặt

display: flex;

hoặc là

display: inline-flex;

Nội dungbên trong thùng chứasẽ được căn chỉnh bằng cách sử dụng flexbox.


Thuộc tính vùng chứa

Một số thuộc tính flexbox áp dụng cho vùng chứa, điều này đặt ra các quy tắc chung cho các mặt hàng của nó. họ đang

  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • flex-flow

Căn chỉnh hàng hoặc cột

Thuộc tính đầu tiên chúng tôi thấy,flex-direction, xác định xem vùng chứa nên sắp xếp các mục của nó dưới dạng hàng hay dưới dạng cột:

  • flex-direction: rowđặt các mục như mộthàng, theo hướng văn bản (từ trái sang phải đối với các nước phương Tây)
  • flex-direction: row-reverseđặt các mục giống nhưrownhưng theo hướng ngược lại
  • flex-direction: columnđặt các mục trong mộtcột, sắp xếp từ trên xuống dưới
  • flex-direction: column-reverseđặt các mục trong một cột, giống nhưcolumnnhưng theo hướng ngược lại

Rows or columns

Căn chỉnh dọc và ngang

Theo mặc định, các mục bắt đầu từ bên trái nếuflex-directionrowvà từ trên cùng nếuflex-directioncolumn.

Vertical and horizontal alignment

Bạn có thể thay đổi hành vi này bằng cách sử dụngjustify-contentđể thay đổi căn chỉnh ngang vàalign-itemsđể thay đổi căn chỉnh theo chiều dọc.

Thay đổi căn chỉnh ngang

justify-contentcó 5 giá trị có thể có:

  • flex-start: căn chỉnh về phía bên trái của thùng chứa.
  • flex-end: căn chỉnh về phía bên phải của thùng hàng.
  • center: căn chỉnh ở tâm của thùng chứa.
  • space-between: hiển thị với khoảng cách bằng nhau giữa chúng.
  • space-around: hiển thị với khoảng cách bằng nhau xung quanh chúng

Horizontal alignment

Thay đổi căn chỉnh dọc

align-itemscó 5 giá trị có thể có:

  • flex-start: căn chỉnh vào đầu của thùng chứa.
  • flex-end: căn chỉnh đến đáy của thùng chứa.
  • center: căn chỉnh ở tâm thẳng đứng của thùng chứa.
  • baseline: hiển thị ở đường cơ sở của vùng chứa.
  • stretch: các mặt hàng được kéo căng để vừa với thùng hàng.

Vertical alignment

Một lưu ý vềbaseline

baselinetrông tương tự nhưflex-starttrong ví dụ này, do các hộp của tôi quá đơn giản. Thủ tục thanh toánCodepen nàyđể có một ví dụ hữu ích hơn, mà tôi đã tách từ Pen ban đầu được tạo ra bởiMartin Michálek. Như bạn có thể thấy ở đó, kích thước các mục được căn chỉnh.

Bọc lại

Theo mặc định, các mục trong hộp đựng flexbox được giữ trên một dòng, thu nhỏ chúng để vừa với hộp.

Để buộc các mục nằm trên nhiều dòng, hãy sử dụngflex-wrap: wrap. Điều này sẽ phân phối các mặt hàng theo thứ tự được đặt trongflex-direction. Sử dụngflex-wrap: wrap-reverseđể đảo ngược thứ tự này.

Thuộc tính viết tắt được gọi làflex-flowcho phép bạn chỉ địnhflex-directionflex-wraptrong một dòng, bằng cách thêmflex-directiongiá trị đầu tiên, tiếp theo làflex-wrapgiá trị, ví dụ:flex-flow: row wrap.


Thuộc tính áp dụng cho từng mục đơn lẻ

Kể từ bây giờ, chúng tôi đã thấy các thuộc tính bạn có thể áp dụng cho vùng chứa.

Các mục đơn lẻ có thể có tính độc lập và linh hoạt nhất định và bạn có thể thay đổi hình thức của chúng bằng cách sử dụng các thuộc tính sau:

  • order
  • align-self
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex

Chúng ta hãy xem chúng một cách chi tiết.

Di chuyển các mục trước / sau một mục khác bằng cách sử dụng đơn đặt hàng

Các mặt hàng được sắp xếp dựa trên một đơn hàng mà chúng được chỉ định. Theo mặc định mọi mặt hàng đều có đơn đặt hàng0và sự xuất hiện trong HTML xác định thứ tự cuối cùng.

Bạn có thể ghi đè thuộc tính này bằng cách sử dụngordertrên mỗi mục riêng biệt. Đây là thuộc tính bạn đặt trên mặt hàng, không phải vùng chứa. Bạn có thể làm cho một mục xuất hiện trước tất cả các mục khác bằng cách đặt giá trị âm.

Moving items before or after another one

Căn chỉnh theo chiều dọc bằng cách sử dụng căn chỉnh tự

Một mục có thể chọnghi đèthùng chứaalign-itemsthiết lập, sử dụngalign-self, có cùng 5 giá trị có thể có củaalign-items:

  • flex-start: căn chỉnh vào đầu của thùng chứa.
  • flex-end: căn chỉnh đến đáy của thùng chứa.
  • center: căn chỉnh ở tâm thẳng đứng của thùng chứa.
  • baseline: hiển thị ở đường cơ sở của vùng chứa.
  • stretch: các mặt hàng được kéo căng để vừa với thùng hàng.

Vertical alignment

Tăng hoặc thu nhỏ một mục nếu cần thiết

uốn cong

The defaut for any item is 0.

Nếu tất cả các mục được xác định là 1 và một mục được xác định là 2, phần tử lớn hơn sẽ chiếm không gian của hai mục “1”.

uốn cong

The defaut for any item is 1.

Nếu tất cả các mục được xác định là 1 và một mục được xác định là 3, phần tử lớn hơn sẽ thu nhỏ 3 lần các phần tử còn lại. Khi có ít dung lượng hơn, nó sẽ chiếm ít dung lượng hơn gấp 3 lần.

cơ sở linh hoạt

Nếu được đặt thànhauto, nó kích thước một mục theo chiều rộng hoặc chiều cao của nó và thêm không gian dựa trênflex-growbất động sản.

Nếu được đặt thành 0, nó không thêm bất kỳ khoảng trống nào cho mục khi tính toán bố cục.

Nếu bạn chỉ định một giá trị số pixel, nó sẽ sử dụng giá trị đó làm giá trị chiều dài (chiều rộng hoặc chiều cao tùy thuộc vào đó là một mục hàng hay một cột)

uốn dẻo

Thuộc tính này kết hợp 3 thuộc tính trên:

  • flex-grow
  • flex-shrink
  • flex-basis

và cung cấp một cú pháp viết tắt:flex: 0 1 auto

Tải xuống miễn phí của tôiSổ tay CSS


Các hướng dẫn css khác: