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
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;}
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;}
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;}
Và ngược lại…
.flex-container {-webkit-flex-direction: column-reverse; /* Safari */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;}
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;}
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;}
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
.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
.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
.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
.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
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
.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
.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
.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
.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
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
.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
.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
.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
.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
.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
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 và ::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
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
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ị
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
Hotline
