Flexbox trong css

  • admin
  • 28 Tháng Bảy, 2022
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

 

guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận

Nhấn ESC để đóng

0
Rất thích suy nghĩ của bạn, hãy bình luận.x