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
