Để thiết kế nên một trang web thì việc sắp xếp bố cục các element là điều đương nhiên bạn cần phải biết. Thông thường để dàn trang các phần tử theo chiều ngang ta thường sẽ sử dụng các thuộc tính như display:inline-block hoặc phổ biến nhất là float. Nhược điểm lớn nhất của float chắc bạn cũng không xa lạ gì nữa đó là nó luôn làm ảnh hưởng tới các thành phần bên dưới nó nên lúc nào ta cũng phải rình rình để clearfix
Công nghệ flexbox được ra đời để cải thiện và giúp cho việc dàn trang trở nên đơn giản hơn bao giờ hết
Flexbox là một cách bố trí mới của CSS3, giống với float, Flexbox quy định vị trí các phần tử trên cùng một hàng hoặc một cột, nhưng đương nhiên là nó xịn hơn float nhiều.
Lí do minh chứng flexbox đang là xu hướng dàn trang trong thiết kế web đó là nó đã được hầu hết các trang lớn như youtube, microsoft, google,... cũng như một framework rất mạnh trong layout - bootstrap 4 sử dụng
Nói như vậy cũng không có nghĩa nó là hoàn hảo, vì là một công nghệ mới nên chắc chắn nó chưa thể support đầy đủ các trình duyệt cũ như float được (ví dụ như tôi duyệt trang bằng IE10 là flexbox phế 😀). Nhưng bây giờ cái gì mở lên là cũng bắt update hết rồi nên bạn vẫn nên sử dụng flexbox để cho việc thiết kế trở nên nhàn hơn
Ok giờ ta bắt đầu !
Để làm việc với flexbox bắt buộc bạn phải xác định được thành phần cha (flex container) và thành phần con (flex items)
Flex container (thành phần cha)
Flex items (thành phần con)
I. Flex container và các thuộc tính
1. Display
Để các flex items có thể sử dụng các thuộc tính flexbox thì bắt buộc container chứa chúng phải có display.
Cú pháp:
.container {
display: flex; /* or inline-flex */
}2 giá trị cho thuộc tính này gồm
+ flex: Hiển thị phần tử dưới dạng vùng chứa cấp độ khối (giống như display:block)
.container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}+ inline-flex: Hiển thị phần tử dưới dạng vùng chứa flex cấp nội tuyến (giống như display:inline-block)
.container {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}2. flex-direction
Thuộc tính này quy định việc hiển thị theo trục chính
Cú pháp
.container {
flex-direction: row | row-reverse | column | column-reverse;
}Có 4 giá trị bao gồm
+ row: giá trị mặc định, các items được hiển thị theo chiều ngang, như một hàng
.container {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}+ row-reverse: giống như row, nhưng thứ tự các item bị đảo ngược
.container {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-moz-box-orient: horizontal;
-moz-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}+ column: các items được hiển thị theo chiều dọc, dạng cột
.container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}+ column-reverse: giống như column, nhưng thứ tự các item bị đảo ngược
.container {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-moz-box-orient: vertical;
-moz-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}3. flex-wrap
Mặc định, tất cả các mục flex sẽ cố gắng vừa trên một dòng
Cú pháp
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}Bạn có thể chỉ định các giá trị như sau
+ nowrap : giá trị mặc định., items sẽ không wrap
.container{
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}+ wrap : các items sẽ wrap xuống hàng khi cần thiết
.container{
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}+ wrap-reverse : các items sẽ wrap xuống hàng khi cần thiết và đảo ngược thứ tự
.container{
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}4. flex-flow
Đây là cách viết rút gọn (shorthand) của flex-direction và flex-wrap
Cú pháp
flex-flow: <flex-direction> || <flex-wrap>
5. justify-content
Đây là một thuộc tính tuyệt vời của flexbox, nó giúp ta có thể dễ dàng hiển thị item như căn phải-trái-giữa đơn giản hơn so với khi sử dụng float rất nhiều
Cú pháp
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}+ flex-start: Giá trị mặc định, các items được định vị ở đầu vùng chứa
.container {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-moz-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}+ flex-end: Các items được đặt ở cuối vùng chứa
.container {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-moz-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}+ center: Các items được đặt ở trung tâm của vùng chứa
.container {
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}+ space-between: Các items được định vị với khoảng trống giữa các dòng
.container {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}+ space-around: Các items được định vị với khoảng trống trước, giữa và sau dòng
.container {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}+ space-evenly: các items được phân phối sao cho khoảng cách giữa hai items (và không gian cho các cạnh) bằng nhau
.container {
-webkit-box-pack: space-evenly;
-webkit-justify-content: space-evenly;
-moz-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
}6. align-items
Dùng để căn chỉnh vị trí cho các items bên trong container
Cú pháp
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}+ stretch: Mặc định, các items được kéo dài để vừa với vùng chứa
.container {
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-moz-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}+ center: Các items được đặt ở trung tâm của vùng chứa
.container {
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}+ flex-start: Các items được định vị ở đầu vùng chứa
.container {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-moz-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}+ flex-end: Các items được định vị ở cuối vùng chứa
.container {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-moz-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}+ baseline: Các items được định vị tại đường cơ sở của vùng chứa
.container {
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-moz-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}7. align-content
Dùng để thay đổi hành vi của thuộc tính flex-wrap. Tự như align-items, nhưng thay vì căn chỉnh theo items, nó sẽ căn chỉnh theo dòng (flex lines)
Cú pháp
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}+ stretch: Giá trị mặc định. Các dòng kéo dài để chiếm không gian còn lại
.container {
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
}+ center: Các dòng được đẩy về phía giữa của container
.container {
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}+ flex-start: Các dòng được đẩy về phía đầu của container
.container {
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
}+ flex-end: Các dòng được đẩy về phía cuối của container
.container {
-webkit-align-content: flex-end;
-ms-flex-line-pack: end;
align-content: flex-end;
}+ space-between: Các dòng được phân bố đều trong container
.container {
-webkit-align-content: space-between;
-ms-flex-line-pack: justify;
align-content: space-between;
}+ space-around: Các dòng được phân bố đều trong container, với khoảng cách một nửa ở hai đầu
.container {
-webkit-align-content: space-around;
-ms-flex-line-pack: distribute;
align-content: space-around;
}II. Flex items và các thuộc tính
1. order
Dùng để định lại vị trí xuất hiện của các items, đây là một thuộc tính tuyệt vời giúp bạn dễ dàng đặt vị trí hiển thị items bất chấp mã html được viết theo thứ tự nào
Cú pháp
.item {
order: <integer>; /* default is 0 */
}+ integer : giá trị mặc định là 0
.item {
-webkit-box-ordinal-group: 1;
-webkit-order: 0;
-moz-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}2. flex-grow
Xác định phần tăng trưởng tương đối so với phần còn lại của các items bên trong cùng một vùng chứa
Cú pháp
.item {
flex-grow: <number>; /* default 0 */
}+ number: giá trị mặc định là 0
.item {
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-moz-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}3. flex-shrink
Item sẽ co lại như thế nào so với phần còn lại của các items trong cùng một vùng chứa Cú pháp
.item {
flex-shrink: <number>; /* default 1 */
}+ number : mặc định là 1
.item {
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}4. flex-basis
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 từ khóa
Cú pháp
.item {
flex-basis: <number> | auto; /* default auto */
}+ number: mặc định là auto, có thể là đơn vị độ dài hoặc phần trăm
.item {
-webkit-flex-basis: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}5. flex
Đây là dạng shorthand của flex-grow, flex-shrink và flex-basis. Ta nên dùng thuộc tính này cho dễ nhớ
Cú pháp
.item {
flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
}+ Giá trị mặc định flex: 0 1 auto.
.item {
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-moz-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}6. align-self
Chỉ định căn chỉnh cho item đã chọn bên trong vùng chứa
Cú pháp
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}+ auto : Mặc định
.item {
-webkit-align-self: auto;
-ms-flex-item-align: auto;
-ms-grid-row-align: auto;
align-self: auto;
}+ stretch : Phần tử được định vị để vừa với vùng chứa
.item {
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
-ms-grid-row-align: stretch;
align-self: stretch;
}+ center : Phần tử được đặt ở trung tâm của vùng chứa
.item {
-webkit-align-self: center;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}+ flex-start : Phần tử được đặt ở đầu của vùng chứa
.item {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
}+ flex-end : Phần tử được đặt ở cuối của vùng chứa
.item {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}+ baseline : Phần tử được đặt ở đường cơ sở của vùng chứa
.item {
-webkit-align-self: baseline;
-ms-flex-item-align: baseline;
align-self: baseline;
}demo
III. Kết luận
Như vậy tôi đã giới thiệu và demo cho bạn xong toàn bộ những gì liên quan đến flexbox. Đây là một công nghệ rất mới giúp lập trình viên có thể dễ dàng layout hơn rất nhiều. Hi vọng sau khi đọc xong bài viết này bạn có thể tự tin sử dụng flexbox để thiết kế nên những trang web chuyên nghiệp
Good Luck !
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên