Hướng dẫn hoàn chỉnh về Flexbox | Thủ thuật CSS – hiển thị flex hoặc flexbox

Hướng dẫn toàn diện của chúng tôi về bố cục flexbox CSS. Hướng dẫn đầy đủ này giải thích mọi thứ về flexbox, tập trung vào tất cả các thuộc tính khác nhau có thể có cho phần tử mẹ (vùng chứa flex) và các phần tử con (các mục flex). Nó cũng bao gồm lịch sử, bản trình diễn, mẫu và biểu đồ hỗ trợ trình duyệt.

Bạn đang xem : hiển thị flex hoặc flexbox

​​ Nền

Mô-đun Flexbox Layout (Linh hoạt Box) ( một Đề xuất Ứng viên W3C kể từ tháng 10 năm 2017) nhằm mục đích cung cấp một cách hiệu quả hơn để bố trí , sắp xếp và phân bổ 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 và / hoặc động (do đó là từ “flex”).

Ý tưởng chính đằng sau bố cục linh hoạt là cung cấp cho vùng chứa khả năng thay đổi chiều rộng / chiều cao (và thứ tự) của các mặt hàng để lấp đầy không gian có sẵn một cách tốt nhất (chủ yếu là để phù hợp với tất cả các loại thiết bị hiển thị và kích thước màn hình). Hộp chứa linh hoạt mở rộng các mục để lấp đầy không gian trống có sẵn hoặc thu nhỏ chúng để ngăn tràn.

Quan trọng nhất, bố cục flexbox là bất khả tri hướng trái ngược với bố cục thông thường (khối dựa trên chiều dọc và nội tuyến dựa trên chiều ngang). Mặc dù các ứng dụng này hoạt động tốt cho các trang, nhưng chúng thiếu tính linh hoạt (không nhằm mục đích chơi chữ) để hỗ trợ các ứng dụng lớn hoặc phức tạp (đặc biệt khi nói đến thay đổi hướng, thay đổi kích thước, kéo dài, thu nhỏ, v.v.).

Lưu ý: Bố cục Flexbox phù hợp nhất với các thành phần của ứng dụng và bố cục quy mô nhỏ, trong khi bố cục Grid dành cho bố cục quy mô lớn hơn.

Khái niệm cơ bản và thuật ngữ

Vì flexbox là một mô-đun toàn bộ chứ không phải một thuộc tính riêng lẻ, nó liên quan đến rất nhiều thứ bao gồm toàn bộ tập hợp các thuộc tính của nó. Một số trong số chúng được thiết lập trên vùng chứa (phần tử mẹ, được gọi là “vùng chứa linh hoạt”) trong khi các phần tử khác được đặt trên vùng con (đã nói là “vật phẩm linh hoạt”).

Nếu bố cục “thông thường” dựa trên cả hướng khối và hướng dòng chảy nội tuyến, thì bố cục linh hoạt dựa trên “hướng dòng chảy linh hoạt”. Vui lòng xem hình này từ thông số kỹ thuật, giải thích ý tưởng chính đằng sau bố cục linh hoạt.

Các mục sẽ được bố trí theo trục chính (từ main-start đến main-end ) hoặc trục chéo (từ cross-start đến cross-end ).

  • Trục chính – Trục chính của vùng chứa linh hoạt là trục chính mà dọc theo đó các mục linh hoạt được bố trí. Hãy coi chừng, nó không nhất thiết phải nằm ngang; nó phụ thuộc vào thuộc tính flex-direction (xem bên dưới).
  • main-start | main-end – Các mặt hàng flex được đặt trong vùng chứa bắt đầu từ main-start và đến main-end.
  • kích thước chính – Chiều rộng của item flex hoặc chiều cao, tùy theo kích thước chính, là kích thước chính của mặt hàng. Thuộc tính kích thước chính của mục flex là thuộc tính “width” hoặc “height”, tùy theo kích thước chính.
  • trục chéo – Trục vuông góc với trục chính là gọi là trục chéo. Hướng của nó phụ thuộc vào hướng trục chính.
  • bắt đầu chéo | cross-end – Các đường uốn cong chứa đầy các mặt hàng và được đặt vào vùng chứa bắt đầu từ phía bắt đầu chéo của vùng chứa linh hoạt và đi về phía mặt cắt ngang.
  • chéo kích thước – Chiều rộng hoặc chiều cao của một mặt hàng linh hoạt, tùy theo kích thước chéo nào, là kích thước chéo của mặt hàng đó. Thuộc tính kích thước chéo là tùy thuộc vào “chiều rộng” hoặc ‘chiều cao’ thuộc kích thước chéo.

Thuộc tính Flexbox

Thuộc tính dành cho Cấp độ gốc < br /> (vùng chứa linh hoạt)

hiển thị

Điều này xác định một vùng chứa linh hoạt; nội tuyến hoặc khối tùy thuộc vào giá trị đã cho. Nó tạo ra một bối cảnh linh hoạt cho tất cả những người con trực tiếp của nó.

  .container {
  hiển thị: flex; / * hoặc inline-flex * /
}  

Lưu ý rằng các cột CSS không ảnh hưởng đến vùng chứa linh hoạt.

flex-direction

Điều này thiết lập trục chính, do đó xác định hướng các mục flex được đặt trong vùng chứa flex. Flexbox là (ngoài gói tùy chọn) là một khái niệm bố cục một hướng. Hãy coi các mục linh hoạt chủ yếu được bố trí theo hàng ngang hoặc cột dọc.

  .container {
  flex-direction: row | ngược hàng | cột | ngược cột;
}  
  • row (default): từ trái sang phải trong ltr ; từ phải sang trái trong rtl
  • row-reverse : từ phải sang trái trong ltr ; từ trái sang phải trong rtl
  • cột : giống với hàng nhưng từ trên xuống dưới
  • < code> column-reverse : giống như row-reverse nhưng từ dưới lên trên

flex-wrap

Theo mặc định, tất cả các mục linh hoạt sẽ cố gắng vừa với một dòng. Bạn có thể thay đổi điều đó và cho phép các vật dụng được bọc lại nếu cần với thuộc tính này.

  .container {
  flex-wrap: nowrap | bọc | quấn-ngược;
}  
  • nowrap (mặc định): tất cả các mục flex sẽ nằm trên một dòng
  • wrap : các mục flex sẽ nằm trên nhiều dòng, từ trên xuống dưới.
  • wrap-reverse : các mục flex sẽ quấn thành nhiều dòng từ dưới lên trên.

Có một số bản trình diễn trực quan của flex-wrap tại đây .

flex-flow

Đây là cách viết tắt của các thuộc tính flex-direction flex-wrap , các thuộc tính này cùng xác định trục chính và trục chéo của vùng chứa flex. Giá trị mặc định là row nowrap .

  .container {
  flex-flow: quấn cột;
}  

justify-content

Điều này xác định sự liên kết dọc theo trục chính. Nó giúp phân phối thêm không gian trống còn lại khi tất cả các mục linh hoạt trên một dòng là không linh hoạt hoặc linh hoạt nhưng đã đạt đến kích thước tối đa. Nó cũng thực hiện một số kiểm soát đối với việc căn chỉnh của các mục khi chúng tràn dòng.

  .container {
  justify-content: flex-start | flex-end | trung tâm | không gian giữa | không gian xung quanh | không gian-đồng đều | bắt đầu | kết thúc | trái | đúng ... + an toàn | không an toàn;
}  
  • flex-start (default): các mục được đóng gói về phía bắt đầu của hướng flex.
  • flex-end : các mặt hàng được đóng gói về phía cuối của hướng uốn cong.
  • start : các mặt hàng được đóng gói về phía đầu của hướng chế độ ghi .
  • end : các mục được đóng gói về phía cuối của hướng chế độ ghi .
  • left : các mặt hàng được đóng gói về phía cạnh trái của vùng chứa, trừ khi điều đó không hợp lý với flex-direction , thì nó sẽ hoạt động giống như start .
  • right : các mặt hàng được đóng gói về phía cạnh phải của thùng chứa, trừ khi điều đó không hợp lý với flex-direction , thì nó sẽ hoạt động giống như start .
  • center : các mục được căn giữa dọc theo dòng
  • khoảng trắng giữa : các mục được phân bổ đồng đều trong dòng; mục đầu tiên ở dòng bắt đầu, mục cuối cùng ở dòng cuối
  • khoảng trắng : các mục được phân bổ đều trong dòng với khoảng cách bằng nhau xung quanh chúng. Lưu ý rằng về mặt trực quan, các khoảng trống không bằng nhau, vì tất cả các mục đều có không gian bằng nhau ở cả hai bên. Mục đầu tiên sẽ có một đơn vị không gian so với cạnh của vùng chứa, nhưng hai đơn vị khoảng cách giữa mục tiếp theo vì mục tiếp theo đó có khoảng cách riêng được áp dụng.
  • khoảng trắng : các mục được phân phối sao cho khoảng cách giữa hai mục bất kỳ (và khoảng trống ở các cạnh) là bằng nhau.

Lưu ý rằng sự hỗ trợ của trình duyệt cho các giá trị này là khác nhau. Ví dụ: space-between chưa bao giờ được hỗ trợ từ một số phiên bản Edge và start / end / left / right chưa có trong Chrome. MDN có biểu đồ chi tiết . Các giá trị an toàn nhất là flex-start , flex-end center .

Ngoài ra, bạn có thể ghép nối hai từ khóa bổ sung với các giá trị này: safe không an toàn . Việc sử dụng safe đảm bảo rằng dù bạn thực hiện kiểu định vị này, bạn không thể đẩy một phần tử để nó hiển thị ra ngoài màn hình (ví dụ: ở trên cùng) theo cách mà nội dung không thể cuộn được quá (được gọi là "mất dữ liệu").

align-items

Điều này xác định hành vi mặc định cho cách các mục linh hoạt được bố trí dọc theo trục chéo trên dòng hiện tại. Hãy coi đây là phiên bản justify-content cho trục chéo (vuông góc với trục chính).

  .container {
  align-items: kéo dài | flex-start | flex-end | trung tâm | đường cơ sở | đường cơ sở đầu tiên | đường cơ sở cuối cùng | bắt đầu | kết thúc | tự khởi động | tự kết thúc + ... an toàn | không an toàn;
}  
  • stretch (mặc định): kéo căng để lấp đầy vùng chứa (vẫn tuân theo chiều rộng tối thiểu / chiều rộng tối đa)
  • flex-start / start / self-start : các mục được đặt ở đầu trục chéo. Sự khác biệt giữa những điều này là rất nhỏ và về việc tôn trọng các quy tắc flex-direction hoặc các quy tắc write-mode .
  • flex-end / end / self-end : các mục được đặt ở cuối trục chéo. Sự khác biệt một lần nữa rất tinh tế và đó là về việc tôn trọng các quy tắc flex-direction so với các quy tắc write-mode .
  • center : các mục được căn giữa theo trục chéo
  • đường cơ sở : các mục được căn chỉnh chẳng hạn như căn chỉnh các đường cơ sở của chúng

Từ khóa sửa đổi an toàn không an toàn có thể được sử dụng cùng với tất cả các từ khóa còn lại này (mặc dù lưu ý rằng hỗ trợ trình duyệt ) và giải quyết việc giúp bạn ngăn chặn việc căn chỉnh các yếu tố khiến nội dung không thể truy cập được.

align-content

Điều này căn chỉnh các dòng của vùng chứa linh hoạt khi có thêm khoảng trống trong trục chéo, tương tự như cách justify-content căn chỉnh các mục riêng lẻ trong trục chính.

Lưu ý: Thuộc tính này chỉ có hiệu lực trên các vùng chứa linh hoạt nhiều dòng, trong đó flex-wrap được đặt thành wrap hoặc wrap-reverse ). Vùng chứa linh hoạt một dòng (nghĩa là trong đó flex-wrap được đặt thành giá trị mặc định, no-wrap ) sẽ không phản ánh align-content .

  .container {
  align-content: flex-start | flex-end | trung tâm | không gian giữa | không gian xung quanh | không gian-đồng đều | kéo dài | bắt đầu | kết thúc | đường cơ sở | đường cơ sở đầu tiên | đường cơ sở cuối cùng + ... an toàn | không an toàn;
}  
  • normal (default): các mặt hàng được đóng gói ở vị trí mặc định như thể không có giá trị nào được đặt.
  • flex-start / start : các mặt hàng được đóng gói đến đầu của thùng chứa. flex-start (được hỗ trợ nhiều hơn) tôn vinh flex-direction trong khi start tôn vinh hướng write-mode .
  • flex-end / end : các mặt hàng được đóng gói đến cuối thùng chứa. (Hỗ trợ thêm) flex-end tôn vinh flex-direction trong khi end tôn vinh hướng chế độ viết .
  • center : các mục được căn giữa trong vùng chứa
  • space-between : các mục được phân bổ đồng đều; dòng đầu tiên ở đầu vùng chứa trong khi dòng cuối cùng ở cuối
  • space-around : các mục được phân bổ đồng đều với khoảng cách bằng nhau xung quanh mỗi dòng
  • < li> khoảng cách-đều : các mục được phân bổ đồng đều với không gian bằng nhau xung quanh chúng

  • dãn : các dòng kéo dài để chiếm không gian còn lại

Từ khóa sửa đổi an toàn không an toàn có thể được sử dụng cùng với tất cả các từ khóa còn lại này (mặc dù lưu ý rằng hỗ trợ trình duyệt ) và giải quyết việc giúp bạn ngăn chặn việc căn chỉnh các yếu tố khiến nội dung không thể truy cập được.

khoảng cách, khoảng cách hàng, khoảng cách cột

Thuộc tính gap kiểm soát rõ ràng khoảng cách giữa các mục flex. Nó chỉ áp dụng khoảng cách giữa các mục không nằm ở các cạnh bên ngoài.

  .container {
  hiển thị: flex;
  ...
  khoảng cách: 10px;
  khoảng cách: 10px 20px; / * khoảng cách cột khoảng cách hàng * /
  khoảng cách hàng: 10px;
  cột-khoảng cách: 20px;
}  

Hành vi có thể được coi là một rãnh nhỏ nhất, như thể rãnh lớn hơn bằng cách nào đó (vì một cái gì đó như justify-content: space-between; ) thì khoảng cách sẽ chỉ có hiệu lực nếu không gian đó sẽ nhỏ hơn.

Nó không dành riêng cho flexbox, gap cũng hoạt động trong bố cục lưới và nhiều cột.

Thuộc tính cho Trẻ em < br /> (các mặt hàng linh hoạt)

đơn đặt hàng

Theo mặc định, các mục linh hoạt được sắp xếp theo thứ tự nguồn. Tuy nhiên, thuộc tính order kiểm soát thứ tự mà chúng xuất hiện trong vùng chứa flex.

  .item {
  thứ tự: 5; / * mặc định là 0 * /
}  

Các mặt hàng có cùng đơn đặt hàng hoàn nguyên về đơn đặt hàng nguồn.

flex-grow

Điều này xác định khả năng phát triển một mặt hàng 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ệ. Nó chỉ định lượng không gian có sẵn bên trong hộp linh hoạt mà mặt hàng sẽ chiếm.

Nếu tất cả các mục có flex-grow được đặt thành 1 , thì không gian còn lại trong vùng chứa sẽ được phân phối đều cho tất cả các mục con. Nếu một trong các phần tử con có giá trị là 2 , phần con đó sẽ chiếm gấp đôi dung lượng của một trong hai phần tử còn lại (hoặc ít nhất nó sẽ cố gắng).

  .item {
  flex-mọc: 4; / * mặc định 0 * /
}  

Các số âm không hợp lệ.

flex-co

Điều này xác định khả năng co lại của một mặt hàng nếu cần.

  .item {
  uốn-co: 3; / * mặc định 1 * /
}  

Các số âm không hợp lệ.

flex-base

Điều này xác định kích thước mặc định của một phần tử trước khi không gian còn lại được phân phối. Nó có thể là độ dài (ví dụ: 20%, 5rem, v.v.) hoặc một từ khóa. Từ khóa auto có nghĩa là “xem thuộc tính chiều rộng hoặc chiều cao của tôi” (được thực hiện tạm thời bởi từ khóa main-size cho đến khi không được dùng nữa). Từ khóa content có nghĩa là “định kích thước dựa trên nội dung của mặt hàng” - từ khóa này chưa được hỗ trợ tốt, do đó, rất khó để kiểm tra và khó biết được những người anh em của nó là gì max-content , min-content fit-content .

  .item {
  cơ sở flex: | Tự động; / * tự động mặc định * /
}  

Nếu được đặt thành 0 , không gian thừa xung quanh nội dung sẽ không được tính vào. Nếu được đặt thành auto , không gian bổ sung được phân phối dựa trên flex của nó -giá trị phát triển. Xem hình ảnh này.

flex

Đây là cách viết tắt của flex-grow, flex-co flex-base được kết hợp. Các tham số thứ hai và thứ ba ( flex-co flex-base ) là tùy chọn. Giá trị mặc định là 0 1 auto , nhưng nếu bạn đặt nó bằng một giá trị số duy nhất, chẳng hạn như flex: 5; , sẽ thay đổi mã flex-base thành 0%, vì vậy nó giống như đặt flex-grow: 5; uốn-co: 1; cơ sở linh hoạt: 0%; .

  .item {
  flex: không có | [& lt; 'flex-grow' & gt; & lt; 'flex-co' & gt ;? || & lt; 'flex-base' & gt; ]
}  

Bạn nên sử dụng thuộc tính viết tắt này thay vì đặt các thuộc tính riêng lẻ. Tốc ký đặt các giá trị khác một cách thông minh.

align-self

Điều này cho phép căn chỉnh mặc định (hoặc căn chỉnh được chỉ định bởi align-items ) được ghi đè cho các mục linh hoạt riêng lẻ.

Vui lòng xem phần giải thích align-items để hiểu các giá trị có sẵn.

  .item {
  align-self: auto | flex-start | flex-end | trung tâm | đường cơ sở | căng ra;
}  

Lưu ý rằng float , clear vertical-align không ảnh hưởng đến mục flex.

Prefixing Flexbox

Flexbox yêu cầu một số tiền tố của nhà cung cấp để hỗ trợ hầu hết các trình duyệt có thể. Nó không chỉ bao gồm các thuộc tính trước với tiền tố nhà cung cấp, mà còn có các tên thuộc tính và giá trị thực sự hoàn toàn khác nhau. Điều này là do thông số kỹ thuật của Flexbox đã thay đổi theo thời gian, tạo ra các phiên bản “cũ”, “tweener” và “mới” .

Có lẽ cách tốt nhất để xử lý vấn đề này là viết cú pháp mới (và cuối cùng) và chạy CSS của bạn thông qua Autoprefixer , công cụ này xử lý rất tốt các trường hợp dự phòng.

Ngoài ra, đây là một Sass @mixin để trợ giúp một số tiền tố, điều này cũng cung cấp cho bạn ý tưởng về loại công việc cần phải thực hiện:

 @mixin flexbox () {
  hiển thị: -webkit-box;
  hiển thị: -moz-box;
  hiển thị: -ms-flexbox;
  hiển thị: -webkit-flex;
  hiển thị: flex;
}

@mixin flex ($ giá trị) {
  -webkit-box-flex: $ giá trị;
  -moz-box-flex: $ giá trị;
  -webkit-flex: $ giá trị;
  -ms-flex: $ giá trị;
  flex: $ các giá trị;
}

@mixin đặt hàng ($ val) {
  -webkit-box-ordinal-group: $ val;
  -moz-box-ordinal-group: $ val;
  -ms-flex-order: $ val;
  -webkit-order: $ val;
  đặt hàng: $ val;
}

.vỏ bánh {
  @include flexbox ();
}

.mục {
  @include flex (1 200px);
  @include order (2);
}  

Ví dụ

Hãy bắt đầu với một ví dụ rất đơn giản, giải quyết một vấn đề gần như hàng ngày: căn giữa hoàn hảo. Sẽ không thể đơn giản hơn nếu bạn sử dụng flexbox.

  .parent {
  hiển thị: flex;
  chiều cao: 300px; /* Hay bất cứ cái gì */
}

.đứa trẻ {
  chiều rộng: 100px; /* Hay bất cứ cái gì */
  chiều cao: 100px; /* Hay bất cứ cái gì */
  margin: tự động; /* Ảo thuật! * /
}  

Điều này dựa trên thực tế là ký quỹ được đặt thành auto trong vùng chứa linh hoạt sẽ hấp thụ thêm không gian. Vì vậy, đặt lề auto sẽ làm cho mục được căn giữa một cách hoàn hảo theo cả hai trục.

Bây giờ chúng ta hãy sử dụng một số thuộc tính khác. Hãy xem xét danh sách 6 mục, tất cả đều có kích thước cố định, nhưng có thể được đặt kích thước tự động. Chúng tôi muốn chúng được phân bổ đồng đều trên trục hoành để khi chúng tôi thay đổi kích thước trình duyệt, mọi thứ đều cân xứng và không có các truy vấn phương tiện.

  .flex-container {
  / * Đầu tiên chúng ta tạo bối cảnh bố cục linh hoạt * /
  hiển thị: flex;

  / * Sau đó, chúng tôi xác định hướng dòng chảy
     và nếu chúng tôi cho phép các mục được bọc lại
   * Hãy nhớ điều này giống như:
   * flex-direction: hàng;
   * flex-wrap: bọc;
   * /
  flex-flow: quấn hàng;

  / * Sau đó, chúng tôi xác định cách phân phối không gian còn lại * /
  justify-content: không gian-xung quanh;
}  

Đã xong. Mọi thứ khác chỉ là một số mối quan tâm về kiểu dáng. Dưới đây là một cây bút mô tả ví dụ này. Hãy nhớ truy cập CodePen và thử thay đổi kích thước cửa sổ của bạn để xem điều gì sẽ xảy ra.

Dự phòng nhúng CodePen

Hãy thử một cái gì đó khác. Hãy tưởng tượng chúng tôi có một phần tử điều hướng được căn phải trên đầu trang web của mình, nhưng chúng tôi muốn nó được đặt chính giữa trên màn hình cỡ trung bình và một cột duy nhất trên các thiết bị nhỏ. Đủ dễ dàng.

  / * Large * /
.dẫn đường {
  hiển thị: flex;
  flex-flow: quấn hàng;
  / * Điều này căn chỉnh các mục với dòng kết thúc trên trục chính * /
  justify-content: flex-end;
}

/ * Màn hình trung bình * /
@media all và (max-width: 800px) {
  .dẫn đường {
    / * Khi ở trên màn hình có kích thước trung bình, chúng tôi căn giữa nó bằng cách phân bổ đều không gian trống xung quanh các mục * /
    justify-content: không gian-xung quanh;
  }
}

/ * Màn hình nhỏ * /
@media all và (max-width: 500px) {
  .dẫn đường {
    / * Trên màn hình nhỏ, chúng tôi không còn sử dụng hướng hàng mà là cột * /
    flex-hướng: cột;
  }
}  

Dự phòng nhúng CodePen

Hãy thử điều gì đó tốt hơn nữa bằng cách chơi linh hoạt với các vật phẩm linh hoạt! Điều gì về bố cục 3 cột trên thiết bị di động với đầu trang và chân trang có chiều rộng đầy đủ. Và độc lập với thứ tự nguồn.

  .wrapper {
  hiển thị: flex;
  flex-flow: quấn hàng;
}

/ * Chúng tôi yêu cầu tất cả các mặt hàng phải có chiều rộng 100%, thông qua cơ sở linh hoạt * /
.wrapper & gt; * {
  flex: 1 100%;
}

/ * Chúng tôi dựa trên thứ tự nguồn cho phương pháp tiếp cận ưu tiên thiết bị di động
 * trong trường hợp này:
 * 1. tiêu đề
 * 2. bài báo
 * 3. sang bên 1
 * 4. sang một bên 2
 * 5. chân trang
 * /

/ * Màn hình trung bình * /
@media all và (min-width: 600px) {
  / * Chúng tôi yêu cầu cả hai thanh bên chia sẻ một hàng * /
  .aside {flex: 1 auto; }
}

/ * Màn hình lớn * /
@media all và (min-width: 800px) {
  / * Chúng tôi đảo ngược thứ tự của thanh bên đầu tiên và thanh chính
   * Và yêu cầu phần tử chính có chiều rộng gấp đôi so với hai thanh bên kia
   * /
  .main {flex: 3 0px; }
  .aside-1 {đặt hàng: 1; }
  .main {thứ tự: 2; }
  .aside-2 {thứ tự: 3; }
  .footer {order: 4; }
}  

Dự phòng nhúng CodePen

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse , dữ liệu này có nhiều chi tiết hơn. Một số chỉ ra rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Chrome

Firefox

IE

Cạnh

Safari

21 *

28 < / p>

11

12

6.1 *

Di động / Máy tính bảng

Android Chrome

Android Firefox

Android

iOS Safari

103

101

4.4

7.0-7.1 *

Lỗi

Flexbox chắc chắn không phải là không có lỗi. Bộ sưu tập tốt nhất trong số họ mà tôi đã thấy là của Philip Walton và Greg Whitworth’s Flexbugs . Đó là một nơi mã nguồn mở để theo dõi tất cả chúng, vì vậy tôi nghĩ tốt nhất là chỉ nên liên kết đến đó.


Xem thêm những thông tin liên quan đến chủ đề hiển thị flex hoặc flexbox

[Để học Flexbox tốt hơn] Liên hệ Flex model với các thuộc tính flexbox trong CSS

  • Tác giả: F8 Official
  • Ngày đăng: 2020-12-10
  • Đánh giá: 4 ⭐ ( 2878 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 1. Giới thiệu Flexbox (https://fullstack.edu.vn/learning/html-css/gioi-thieu-flexbox)
    2. Thuộc tính CSS trong Flexbox (https://fullstack.edu.vn/learning/html-css/thuoc-tinh-css-trong-flexbox)
    3. NÊN XEM - Học flexbox qua ví dụ (https://fullstack.edu.vn/learning/html-css/flexbox-sample)

    Link tham khảo: https://codepen.io/enxaneta/full/adLPwv/

    🍺 Buy me a beer
    https://www.buymeacoffee.com/f8official

Học CSS Flexbox toàn tập phần 1

  • Tác giả: evondev.com
  • Đánh giá: 3 ⭐ ( 3565 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn sử dụng CSS Flexbox toàn tập phần 1. Hôm nay chúng ta cùng nhau tìm hiểu về sức mạnh của css Flexbox nhé để hiểu lý do vì sao nó lại được nhiều người sử dụng thay cho float hay inline nhé.

hướng dẫn sử dụng css flexbox cho người mới tìm hiểu

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 6589 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu: Flexbox là một kiểu dàn trang (layout mode) mà nó sẽ tự cân đối kích thước của các phần tử bên trong để hiển thị trên mọi thiết bị. Nói theo cách khác, bạn không cần thiết lập kích thước...

Display Flex trong CSS là gì? Cách dùng Flexbox để xây dựng Layout

  • Tác giả: final-blade.com
  • Đánh giá: 5 ⭐ ( 2760 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Sử dụng bố cục trang Flexbox trong CSS

  • Tác giả: quantrimang.com
  • Đánh giá: 3 ⭐ ( 1909 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Flexbox giúp bạn giải quyết rất nhiều vấn đề về dàn trang trong CSS một cách linh hoạt, dễ dàng và tiết kiệm thời gian chỉ bằng một vài dòng code.

Flexbox là gì? Các thuộc tính cơ bản và một số thuật ngữ liên quan

  • Tác giả: nq.com.vn
  • Đánh giá: 3 ⭐ ( 8485 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng dẫn toàn diện về Căn chỉnh Flexbox

  • Tác giả: webdesign.tutsplus.com
  • Đánh giá: 5 ⭐ ( 5761 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Căn chỉnh có lẽ là khía cạnh khó hiểu nhất của flexbox. Mô-đun flexbox layout có một số thuộc tính căn chỉnh hành xử khác nhau trong các trường hợp khác nhau...

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  JavaScript Thêm lớp (Trong 3 cách) - js div thêm lớp