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 parent element (vùng chứa flex) và các child elements (các mục flex). Nó cũng bao gồm history, demos, patterns và biểu đồ hỗ trợ trình duyệt.

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 đơn 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ó nghĩa là được đặt trên vùng chứa (phần tử mẹ, được gọi là "flex container") trong khi những người khác được thiết lập trên vùng con (đã nói "flex items").

Nếu bố cục "thông thường" dựa trên cả block và inline, thì bố cục linh hoạt dựa trên "flex-flow directions". 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 flex.
Các mục sẽ được bố trí theo trục main axis (từ main-start đến main-end) hoặc trục chéo (từ cross-start đến cross-end).
  • main axis - Trục chính của thù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ục linh hoạt được đặt trong vùng chứa bắt đầu từ main-start và đến main-end.
  • main size - Chiều rộng hoặc chiều cao của một mục linh hoạt, tùy theo kích thước chính, là kích thước chính của mục đó. 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.
  • cross axis - Trục vuông góc với trục chính gọi là trục chéo. Hướng của nó phụ thuộc vào hướng trục chính.
  • cross-start | cross-end - Dòng linh hoạt chứa đầy các mặt hàng và được đặt vào thùng chứa bắt đầu từ phía bắt đầu chéo của thùng linh hoạt và đi về phía chéo cuối.
  • cross size - 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ữ thập, là kích thước chéo của mặt hàng đó. Thuộc tính kích thước chéo là bất kỳ thuộc tính nào của 'width' hoặc 'height' nằm trong kích thước chéo.

Thuộc tính Flexbox

Thuộc tính cho Parent (flex container)

display

Điều này xác định một flex container nội tuyến hoặc khối tùy thuộc vào giá trị đã cho. Nó cho phép một bối cảnh linh hoạt cho tất cả các con trực tiếp của nó. 
.container {
  display: flex; /* or inline-flex */
}
Lưu ý rằng các cột CSS không ảnh hưởng đến flex container.

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à là một khái niệm bố cục một hướng. Hãy nghĩ về các flex items chủ yếu được bố trí theo hàng ngang hoặc cột dọc. 
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
  • row(mặc định): trái sang phải trong ltr; từ phải sang trái trong rtl.
  • row-reverse: phải sang trái trong ltr; trái sang phải trong rtl.
  • column: giống như row nhưng từ trên xuống dưới.
  • 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 mục bọc lại nếu cần với thuộc tính này. 
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap (mặc định): tất cả các mục linh hoạt sẽ nằm trên một dòng
  • wrap: các mục flex sẽ quấn thành 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.

flex-flow

Đây là cách viết tắt của các thuộc tính flex-direction và flex-wrap, chúng 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: column wrap;
}

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 | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
  • flex-start (mặc định): các mục được đóng gói về phía bắt đầu của hướng uốn.
  • flex-end: các mặt hàng được đóng gói về cuối hướng uốn.
  • start: các mặt hàng được đóng gói về phía bắt đầu của writing-mode.
  • end: các mặt hàng được đóng gói về cuối writing-mode.
  • left: các mặt hàng được đóng gói về phía cạnh trá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 như thế nào 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 như thế nào start.
  • center: các mục được căn giữa dọc theo dòng
  • space-between: các mục được phân bố đều trong dòng; mục đầu tiên ở dòng bắt đầu, mục cuối cùng ở dòng cuối
  • space-around: các mục được phân bố đều trong dòng với khoảng trống xung quanh chúng bằng nhau. Lưu ý rằng 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 thùng chứa, nhưng hai đơn vị không gian giữa mục tiếp theo vì mục tiếp theo đó áp dụng khoảng cách riêng.
  • space-evenly: 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 đến các cạnh) là bằng nhau.
Lưu ý rằng 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ờ nhận được hỗ trợ từ một số phiên bản của Edge và start/end/left/right chưa có trong Chrome. MDN có các biểu đồ chi tiết. Các giá trị an toàn nhất là flex-start, flex-end và center.

Ngoài ra còn có hai từ khóa bổ sung mà bạn có thể ghép nối với các giá trị này: safe và unsafe. 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ụ như ở trên cùng) theo cách mà nội dung cũng không thể cuộn được (đượ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 nó như là justify-content phiên bản cho trục chéo (vuông góc với trục chính). 
.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
  • stretch (mặc định): kéo dài để 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à tinh tế, và là về việc tôn trọng các flex-directionquy tắc hoặc các writing-modequy tắc.
  • 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 là tinh tế và là về việc tôn trọng flex-direction các quy tắc so với writing-mode các quy tắc.
  • center: các mục được căn giữa theo trục chéo
  • baseline: các mục được căn chỉnh, chẳng hạn như căn chỉnh đường cơ sở của chúng
Từ khóa safe và unsafe công cụ sửa đổi 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 ý 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 phần 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 đường của vùng chứa linh hoạt bên trong 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 một trong hai wrap hoặc wrap-reverse). Vùng chứa linh hoạt một dòng (tức là nơi flex-wrap được đặt thành giá trị mặc định của nó, no-wrap) sẽ không phản ánh align-content.
.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
  • normal (mặc định): các mục được đóng gói ở vị trí mặc định của chúng 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 container. (Được hỗ trợ nhiều hơn) flex-start tôn vinh flex-direction trong khi starttôn vinh writing-mode hướng.
  • flex-end/end: các mặt hàng được đóng gói đến cuối container. Phần (hỗ trợ nhiều hơn) flex-end tôn vinh sự flex-direction kết thúc trong khi tôn vinh writing-mode phương hướng.
  • center: các mục được căn giữa trong vùng chứa
  • space-between: các mặt hàng đượ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
  • space-evenly: các mục được phân bổ đồng đều với không gian bằng nhau xung quanh chúng
  • stretch: dòng kéo dài để chiếm không gian còn lại
Từ khóa safe và unsafe công cụ sửa đổi 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 ý 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 phần tử khiến nội dung không thể truy cập được.

gap, row-gap, column-gap

Thuộc tính gap kiểm soát rõ ràng không gian giữa các mục linh hoạt. 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 {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}
Hành vi này có thể được coi là một rãnh nước tối thiểu, như thể rãnh nước lớn hơn bằng cách nào đó (vì một cái gì đó tương tự justify-content: space-between;) thì khoảng trống 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 Children (flex items)

order

Theo mặc định, flex items được sắp xếp theo thứ tự nguồn. Tuy nhiên, thuộc order tính kiểm soát thứ tự mà chúng xuất hiện trong flex container. 
.item {
  order: 5; /* default is 0 */
}
Items có cùng thứ tự order hoàn nguyên về thứ tự nguồn.

flex-grow

Điều này xác định khả năng cho một mục linh hoạt phát triển nếu cần thiết. 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 đã flex-grow được đặt thành 1, không gian còn lại trong hộp đựng sẽ được phân phối đều cho tất cả trẻ em. Nếu một trong những đứa trẻ có giá trị là 2, đứa trẻ đó sẽ chiếm gấp đôi không gian của một trong những đứa trẻ khác (hoặc ít nhất nó sẽ cố gắng). 
.item {
  flex-grow: 4; /* default 0 */
}
Số âm không hợp lệ.

flex-shrink

Điều này xác định khả năng cho flex item có thể co lại nếu cần thiết. 
.item {
  flex-shrink: 3; /* default 1 */
}
Số âm không hợp lệ.

flex-basis

Đ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à một độ dài (ví dụ: 20%, 5rem, v.v.) hoặc một từ khóa. Từ khóa auto có nghĩa là “look at my width or height property” (đượ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, vì vậy rất khó để kiểm tra và khó hơn để biết các anh em của nó max-content và min-content làm fit-content. 
.item {
  flex-basis:  | auto; /* default auto */
}
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 sẽ được phân phối dựa trên flex-grow giá trị của nó. Xem hình ảnh này.

flex

Đây là cách viết tắt của flex-grow, flex-shrink và flex-basis kết hợp. Tham số thứ hai và thứ ba (flex-shrink và flex-basis) là tùy chọn. Mặc định là 0 1 auto, nhưng nếu bạn đặt nó với một giá trị số duy nhất, chẳng hạn như flex: 5;, thay đổi flex-basis thành 0%, vì vậy nó giống như cài đặt flex-grow: 5; flex-shrink: 1; flex-basis: 0%;. 
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Bạn nên sử dụng thuộc tính viết tắt này hơn là đặt các thuộc tính riêng lẻ.

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 align-items giải thích để hiểu các giá trị có sẵn. 
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Lưu ý rằng float, clear và vertical-align không có tác dụng đối với flex item.

Tiền tố Flexbox

Flexbox yêu cầu một số tiền tố của nhà cung cấp để hỗ trợ nhiều trình duyệt nhất có thể. Nó không chỉ bao gồm các thuộc tính trước với tiền tố của 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.

Có lẽ cách tốt nhất để xử lý điều này là viết theo 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.

Ngoài ra, đây là một Sass @mixin để trợ giúp với 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 được thực hiện: 
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}
Css Flexbox Poster Course 1.49MB 7200×10800 .png