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)

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