Chương 2-Bài 1. Hiểu rõ về cơ chế hoạt động của CSS FlexBox

Flexbox căn bản có 2 chiều:

• main-axis: là hướng điểu khiển chính của container. Phụ thuộc vào thuộc tính
  • flex-direction: row
  • flex-direction: row-reverse
  • flex-direction: column
  • flex-direction: column-reverse
• cross-axis: là hướng điều khiển còn lại của container.
  • Nếu main-axis là row thì cross-axis là column
  • Nếu main-axis là column thì `cross-axis là row`

Flex container là phần tử bao bọc, quy định các phần từ con bên trong sẽ hiển thị theo kiểu flex. Phụ thuộc vào thuộc tinh

• display: flex
• display: flex-inline

Khi có nhiều phần tử muốn rớt xuống dòng thì sử dụng thuộc tính flex-wrap flex-flow shorthand là kết hợp của 2 thuộc tính flex-direction và flex-wrap

Thuộc tính áp dụng cho phần từ con (item)

• flex-grow
• flex-shrink
• flex-basis

thuộc tính shorthand flex, set giá trị theo thứ tự flex-grow, flex-shrink, flex-basis

Canh lề các phần tử (items)

align-items: dùng để canh lề các phần tử theo chiều cross-axis justify-content: dùng để canh lề các phần tử theo chiều main-axis