display

Để sử dụng flex trong css thì đơn giản chúng ta chỉ cần khai báo display: flex hoặc display: inline-flex

Về chức năng thì nó cũng như nhau, nhưng flex thì sẽ full 100% phần tử cha chứa nó còn inline-flex thì độ trộng phần tử bao nhiêu thì nó chiếm bấy nhiêu thôi

flex-direction: row | row-reverse | column | column-reverse;

row: Giá trị mặc định sẽ là row theo chiều ngang trái sang phải row-reverse: Các phần tử vẫn nằm theo chiều ngang nhưng hiển thị ngược lại từ phải qua trái column: Các phần tử nằm theo chiều dọc từ trên xuống dưới column-reverse: Các phần tử nằm theo chiều dọc được sắp xếp đảo ngược từ dưới lên trên

align-items: stretch | flex-start | flex-end | center | baseline;

stretch: Giá trị mặc định sẽ là stretch làm cho các cột tự giãn ra cao bằng nhau flex-start: Canh theo phần trên đầu thôi, còn nội dung ngắn dài tự thay đổi flex-end: Canh theo phần trên dưới thôi, còn nội dung ngắn dài tự thay đổi center: Canh giữa theo trục dọc của các phần tử baseline: Nó sẽ canh theo nét chữ nằm theo 1 hàng ngang

align-self: auto | flex-start | flex-end | center | baseline | stretch;

Nó cũng tương tự như align-item nhưng khác ở chỗ nó sẽ set riêng cho từng phần tử

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

flex-start: Giá trị mặc định các phần tử sẽ nằm phía bên trái flex-end: Các phần tử sẽ nằm phía bên phải center: Các phần tử sẽ nằm ở giữa space-between: Nó sẽ tạo các khoảng trống giữa các phần tử bằng nhau space-around: Nó sẽ tạo các khoảng trống giữa các phần tử bằng nhau và các phần tử cũng có khoảng trắng nữa ( = 1/2 khoảng trắng ở giữa) space-evenly: Tạo ra các khoảng trống đều bằng nhau