Flexbox Layout là gì?

Bố cục Flexbox (Flexbox Layout hay còn gọi là CSS3 Flexbox Layout Module) là một loại bố cục mới của CSS3 được tạo ra để cải tiến cách sắp xếp, hướng và trật tự của các phần tử trong một khung lớn (parent container) ngay cả khi chúng có kích thước cố định

Đặc điểm chính của một khung linh hoạt (flex container) là có khả năng điều chỉnh kích thước của các phần tử con để lấp đầy khoảng trống một cách hiệu quả nhất trên các kích thước màn hình khác nhau.

Rất nhiều Nhà Phát Triển và Thiết Kế Web cho rằng bố cục Flexbox rất dễ sử dụng và đơn giản, ngay cả đối với những layout phức tạp cũng chỉ cần rất ít code, hướng đến một phương pháp phát triển đơn giản hơn. Thuật toán này dựa trên phương hướng chứ không như block hay inline layout dựa trên chiều dọc/chiều ngang. Flexbox Layout nên được sử dụng cho các thành phần ứng dụng nhỏ, trong khi CSS Grid Layout Module mới nổi gần đây chuyên dùng để xử lí các layout có quy mô lớn.

Thay vì giải thích cách thức hoạt động của thuộc tính này, mình sẽ tập trung vào việc thuộc tính ảnh hưởng đến layout ra sao một cách trực quan hơn.
 

Về Cơ Bản

Trước khi bắt mô tả về các thuộc tính của flexbox thì mình xin được giới thiệu qua về mô hình bố cục flexbox này. Bố cục Flex được thiết lập từ một khung lớn (parent container) đóng vai trò là khung linh hoạt (flex containter) và các thẻ con ngay trong nó (immediate children) đóng vai trò các mục nhỏ linh hoạt (flex items).

Từ hình ảnh trên bạn có thể thấy các thuộc tính và thuật ngữ được sử dụng để mô tả khung linh hoạt (flex containter) và các các mục nhỏ linh hoạt (flex items). Để hiểu sâu hơn, bạn có thể tham khảo tài liệu chính thức bằng tiếng anh của W3C.
 

Các trình duyệt hỗ trợ flexbox

  • Chrome 29+
  • Firefox 28+
  • Internet Explorer 11+
  • Opera 17+
  • Safari 6.1+ (sử dụng tiền tố -webkit-)
  • Android 4.4+
  • iOS 7.1+ (sử dụng tiền tố -webkit-)

Xem chi tiết về các trình duyệt hỗ trợ flexbox tại đây
 

Sử Dụng

Để sử dụng Bố cục Flexbox bạn chỉ cần đặt giá trị cho thuộc tính display trên khung lớn (parent container).

.flex-container {
display: -webkit-flex; /* Safari */
display: flex;
}


Hoặc bạn muốn nó hiển thị như một phần tử inline….

.flex-container {
display: -webkit-inline-flex; /* Safari */
display: inline-flex;
}


Chú ý: Bạn chỉ cần đặt thuộc tính trên vào khung lớn là các thẻ con sẽ lập tức trở thành các mục linh hoạt.

 

Các Thuộc Tính Của Flexbox Container

Thuộc tính này quy định cách trình bày các mục linh hoạt trong khung linh hoạt, bằng cách đặt hướng cho khung linh hoạt theo một trục chính. Chúng có thể được trình bày theo hai hướng, giống như hàng ngang hay hàng dọc.

Theo hàng ngang (row), các mục linh hoạt sẽ được sắp xếp theo một hàng từ trái qua phải.

.flex-container {
-webkit-flex-direction: row; /* Safari */
flex-direction:         row;
}

 

flexbox flex-direction row

Theo hàng đảo ngược (row-reverse), các mục linh hoạt sẽ được sắp xếp theo một hàng ngược lại.

.flex-container {
-webkit-flex-direction: row-reverse; /* Safari */
flex-direction:         row-reverse;
}

 

flexbox flex-direction row-reverse

Tương tự với hàng dọc (column), các mục linh hoạt sẽ được sắp xếp theo một cột từ trên xuống dưới.

.flex-container {
-webkit-flex-direction: column; /* Safari */
flex-direction:         column;
}

 

flexbox flex-direction column

Và ngược lại…

.flex-container {
-webkit-flex-direction: column-reverse; /* Safari */
flex-direction:         column-reverse;
}

 

flexbox flex-direction column-reverse

Giá trị mặc định: row

Chú ý: hàng (row) và hàng đảo ngược (row-reverse) được phụ thuộc vào chế độ viết cho nên ở chế độ viết từ phải qua trái (rtl) thì chúng sẽ tự động được đảo ngược.

 

flex-wrap

Ý tưởng ban đầu của flexbox là đặt các mục linh hoạt theo một hàng duy nhất. Nhưng sẽ thế nào nếu chúng ta muốn có một bố cục với các mục xếp thành nhiều hàng? Thuộc tính flex-wrap được tạo ra để giúp chúng ta giải quyết điều này.

Các mục linh hoạt được hiển thị trên cùng một hàng, mặc định chúng sẽ tự động dãn hoặc thu hẹp để vừa với chiều rộng của khung lớn.

.flex-container {
-webkit-flex-wrap: nowrap; /* Safari */
flex-wrap:         nowrap;
}

 

flexbox flex-wrap nowrap

Các mục linh hoạt có thể hiển thị nhiều hàng từ trái qua phải và từ trên xuống dưới nếu cần

.flex-container {
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap:         wrap;
}

 

flexbox flex-wrap wrap

Thậm chỉ là ngược lại nếu bạn muốn

.flex-container {
-webkit-flex-wrap: wrap-reverse; /* Safari */
flex-wrap:         wrap-reverse;
}

 

flexbox flex-wrap wrap-reverse

Giá trị mặc định: nowrap

Chú ý: Thuộc tính này phụ thuộc vào chế độ viết cho nên ở chế độ viết từ phải qua trái (rtl) thì chúng sẽ tự động được đảo ngược.

 

flex-flow

Thuộc tính này là một dạng viết tắt (shorthand) cho hai thuộc tính flex-direction và flex-wrap.

.flex-container {
-webkit-flex-flow: || ; /* Safari */
flex-flow:         || ;
}


Giá trị mặc định: row nowrap

 

justify-content

Thuộc tính justify-content sắp xếp các mục linh hoạt theo trục chính của dòng hiện tại trong khung linh hoạt. Nó giúp bổ sung không gian còn thừa ngay cả khi các mục linh hoạt trên một dòng không thể co giãn hoặc đã đạt đến kích thước tối đa.

.flex-container {
-webkit-justify-content: flex-start; /* Safari */
justify-content:         flex-start;
}

Các mục linh hoạt được sắp xếp ở bên trái của khung linh hoạt theo dạng ltr

flexbox justify-content flex-start

.flex-container {
-webkit-justify-content: flex-end; /* Safari */
justify-content:         flex-end;
}

Các mục linh hoạt được sắp xếp ở bên phải của khung linh hoạt theo dạng ltr

flexbox justify-content flex-end

.flex-container {
-webkit-justify-content: center; /* Safari */
justify-content:         center;
}

Các mục linh hoạt được sắp xếp ở giữa khung linh hoạt

flexbox justify-content center

.flex-container {
-webkit-justify-content: space-between; /* Safari */
justify-content:         space-between;
}

Các mục linh hoạt sẽ được hiển thị với khoảng cách tương đương nhau ở giữa chúng, mục linh hoạt đầu tiên và cuối cùng được xếp vào 2 bên của khung linh hoạt

flexbox justify-content space-between

.flex-container {
-webkit-justify-content: space-around; /* Safari */
justify-content:         space-around;
}

Các mục linh hoạt được hiển thị với khoảng cách bằng nhau xung quanh mọi mục linh hoạt, kể cả mục linh hoạt đầu tiên và cuối cùng

flexbox justify-content space-around


Giá trị mặc định: flex-start

 

align-items

Các mục linh hoạt đều có thể sắp xếp qua trục của đường thẳng (line) hiện tại của Khung linh hoạt, khá giống với justify-content nhưng chỉ ở trên một đường thẳng đứng. Thuộc tính này gắn liên kết mặc định cho tất cả các mục linh hoạt, bao gồm cả nhưng mục không có tên.

.flex-container {
-webkit-align-items: stretch; /* Safari */
align-items:         stretch;
}

Các mục linh hoạt kéo dài toàn bộ chiều cao (hoặc chiều ngang) từ điểm bắt đầu cho tới điểm kết thúc của khung linh hoạt

flexbox align-items stretch

.flex-container {
-webkit-align-items: flex-start; /* Safari */
align-items:         flex-start;
}

Các mục linh hoạt được xếp dính vào điểm bắt đầu của khung linh hoạt

flexbox align-items flex-start

.flex-container {
-webkit-align-items: flex-end; /* Safari */
align-items:         flex-end;
}

Các mục linh hoạt được xếp dính vào điểm kết thúc của khung linh hoạt

flexbox align-items flex-end

.flex-container {
-webkit-align-items: center; /* Safari */
align-items:         center;
}

Các mục linh hoạt được xếp dính vào điểm giữa trục của khung linh hoạt

flexbox align-items center

.flex-container {
-webkit-align-items: baseline; /* Safari */
align-items:         baseline;
}

Các mục linh hoạt được sắp xếp theo vị trí của đường cơ sở (baseline) của khung linh hoạt

flexbox align-items baseline

Giá trị mặc định: stretch

Chú ý: Đọc thêm chi tiết về cách tính toán đường cơ sở (baseline) tại đây

 

align-content

Thuộc tính align-content này sắp xếp thẳng hàng các mục linh hoạt trong khung linh hoạt khi có khoảng trắng thừa trong trục, giống như cách justify-content sắp xếp các mục riêng trong trục chính.

.flex-container {
-webkit-align-content: stretch; /* Safari */
align-content:         stretch;
}

Các mục linh hoạt được hiển thị cùng với khoảng trắng thừa bằng nhau sau mỗi hàng

flexbox align-content stretch

.flex-container {
-webkit-align-content: flex-start; /* Safari */
align-content:         flex-start;
}

Các mục linh hoạt được sắp xếp khít nhau từ điểm  bắt đầu để chừa loại các khoảng trống bên dưới khung linh hoạt

flexbox align-content flex-start

.flex-container {
-webkit-align-content: flex-end; /* Safari */
align-content:         flex-end;
}

Các mục linh hoạt sắp xếp khít nhau dính vào điểm kết thúc của khung linh hoạt

flexbox align-content flex-end

.flex-container {
-webkit-align-content: center; /* Safari */
align-content:         center;
}

Các hàng chứa mục linh hoạt được sắp xếp căn chính giữa trục của khung linh hoạt

flexbox align-content center

.flex-container {
-webkit-align-content: space-between; /* Safari */
align-content:         space-between;
}

Các hàng chứa mục linh hoạt được chia đều khoảng cách trong khung linh hoạt, hàng đầu tiên và hàng cuối cùng được gắn vào các cạnh trên dưới của khung linh hoạt

flexbox align-content space-between

.flex-container {
-webkit-align-content: space-around; /* Safari */
align-content:         space-around;
}

Các mục linh hoạt được chia đều khoảng cách quanh mỗi hàng chứa mục linh hoạt trong khung linh hoạt

flexbox align-content space-around

Giá trị mặc định: stretch

Chú ý: Thuộc tính này chỉ hoạt động được khi khung linh hoạt có chứa nhiều hàng mục linh hoạt trong nó.

 

Chú ý dành cho Khung linh hoạt

  • Tất cả các thuộc tính column-* đều không có tác dụng trong Khung linh hoạt
  • Các phần tử giả (pseudo-element) ::first-line::first-letter không có tác dụng trong Khung linh hoạt.

 

Thuộc tính cho các mục linh hoạt

 

order

Thuộc tính order cho phép bạn tùy chỉnh thứ tự sắp xếp của các mục linh hoạt trong khung linh hoạt. Mặc định các mục linh hoạt đã được sắp xếp theo thứ tự ban đầu.

.flex-item {
-webkit-order: ; /* Safari */
order:         ;
}

Các mục linh hoạt có thể được sắp xếp lại với thuộc tính đơn giản này mà bạn không cần phải phá vỡ cấu trúc HTML

flexbox order

Giá trị mặc định: 0

 

flex-grow

Thuộc tính này cho phép bạn phóng đại kích thước của mục linh hoạt theo từng bậc, kích thước sẽ được tăng đương đối với các mục linh hoạt còn lại

.flex-item {
-webkit-flex-grow: ; /* Safari */
flex-grow:         ;
}

Nếu tất cả các mục linh hoạt có cùng giá trị flex-grow  thì tất cả các mục sẽ có cùng một kích thước

flexbox flex-grow 1

 

Và nếu như một mục nào đó có giá trị khác đi thì kích thước của mục đó cũng sẽ tương đương với giá trị

flexbox flex-grow 2

Giá trị mặc định: 0

Chú ý: Số âm (-) không hợp lệ đối với thuộc tính này.
 

Nguồn sưu tầm

Bài viết khác