Cấp bậc tác giả:

HTML

Hướng dẫn sử dụng CSS Flexbox - Phần 2

Được viết bởi webmaster ngày 12/06/2020 lúc 05:33 PM
Trong CSS, từ trước tới nay nếu chúng ta muốn dàn layout của trang thì sẽ sử dụng các thuộc tính float và kỹ thuật clear float để chia cột website như ý muốn. Hoặc muốn thuận tiện hơn thì sử dụng các CSS Grid Framework để tiết kiệm thời gian.
  • 0
  • 8045

Hướng dẫn sử dụng CSS Flexbox - Phần 2

order
Trong đoạn HTML ví dụ của mình trong bài này, mình có đặt số thứ tự cho mỗi phần tử là 1, 2, 3 và 4 với class tương ứng là .item1, .item, .item3 và .item4. Mặc định item này sẽ hiển thị theo thứ tự trong HTML, nhưng với thuộc tính order chúng ta có thể sắp xếp lại vị trí sắp xếp của các item.

Ví dụ mình có:
.item1 {
 order: 4;
}
.item2 {
 order: 3;
}
.item3 {
 order: 1;
}
.item4 {
 order: 2;
}

flex_terms-06.jpg

Mặc định thứ tự sắp xếp sẽ bắt đầu từ bên trái qua phải, từ trên xuống dưới. Nếu bạn chỉnh lại trục của main axis với thuộc tính flex-direction nó sẽ thay đổi ngược lại.

flex-grow
Để làm ví dụ này trước tiên mình hãy bỏ chức năng wrap đi và thiết lập chiều rộng của item là 50px.

.item {
 width: 50px;
}
Bây giờ ở .item2, mình cho giá trị flex-grow là 1, thử nhé.

.item2 {
 flex-grow: 1;
}

flex_terms-07.jpg

Khi thiết lập nó flex-grow là 1, thì nó sẽ lấy phần trống còn lại của container đắp vào. Bây giờ hãy thử cho .item1 với flex-grow: 2, thử xem sao.

.item1 {
 flex-grow: 2;
}

flex_terms-08.jpg

Lúc này giá trị flex-grow: 2 sẽ lấy phần dư lớn gấp đôi của flex-grow: 1.

flex-shrink
Bạn có thể hiểu mặc định tất cả các item đều có giá trị flex-shrink là 1. Điều này có nghĩa là khi chúng ta thu nhỏ trình duyệt lại, các phần tử đều co lại bằng nhau. Tuy nhiên giả sử mình muốn .item3 nó co lại nhiều hơn so với các item khác thì mình sẽ tăng giá trị flex-shrink của nó lên.

.item3 {
 flex-shrink: 2;
}

flex_terms-09.jpg

flex-basis
Cái này bạn có thể hiểu đơn giản nhất là gán cho item một kích thước nhất định. Bạn có thể sử dụng giá trị tuyệt đối hoặc tương đối (căn cứ theo kích thước của container).

.item3 {
 flex-basis: 500px;
}

flex_terms-10.jpg

justify-content
Mặc định các item bên trong sẽ rải đều bắt đầu từ main start đến main end, tuy nhiên nếu container vẫn còn khoảng trống thì có thể dùng thuộc tính justify-content để điều chỉnh lại vị trí bắt đầu của nó.

Thuộc tính này có 5 giá trị và bạn có thể xem tấm ảnh bên dưới mình mượn của CSS Tricks để hiểu hơn về ý nghĩa các giá trị của justify-content.

flex_terms-11.jpg

Đây là ví dụ:
.container {
 display: flex;
 justify-content: flex-end;
}

flex_terms-12.jpg

Trong bài này mình chỉ đề cập tới một số thuộc tính hay dùng trong Flexbox thôi

Video hướng dẫn sử dụng Flexbox phần 2

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML