Bài 5: Học flexbox nâng cao

1. Hàm calc

Function calc dùng để tính chiều rộng (width) của các thẻ dạng block như DIV, SECTION….

Cách dùng: width: calc(100% - 500px);

 Có thể sử dụng các phép toán cộng trừ nhân chia (+ – * /)

2. Hàm attr

Function attr trả về giá trị của một thuộc tính của thẻ đang sử dụng.

Cách dùng: attr(tên thuộc tính)

3. Hàm counter

Function counter dùng để tăng giá trị biến đếm lên 1 đơn vị hoặc đánh dấu theo dạng danh sách, thường dùng để đánh số thứ tự.

Cách dùng: counter(tên, kiểu)

4. Hàm var

Function var dùng để gọi biến được định nghĩa trong thuộc tính :root, dùng cho việc định nghĩa màu, chia cột, padding….Giúp cho việc chỉ thay đổi duy nhất một chỗ, không phải tìm nhiều nơi trong css.

Cách dùng: var( biến );

5. Hàm translate

Function translate được dùng cho thuộc tính transform, translate bao gồm translateX (theo trục ngang), translateY theo trục dọc. Translate được dùng khi cần dịch chuyển một thẻ html nào đó khỏi vị trí ban đầu.

Cách dùng: transform:translateX(30px);