1. Main concept
2. Container attributes
   1. Display: flex
      1. Flex-box là kỹ thuật xử lý layout 1 chiều (tức là chọn 1 hướng làm hướng chính bố cục, hướng còn lại chỉ được coi là hướng phụ).
      2. Display:flex để chuyển đổi phần tử bất kỳ thành flex-container
      3. Không gian khả dụng
         1. Là khoảng không gian còn thừa lại của flex-container.
   2. flex-direction
      1. row (default value)
         1. Sắp xếp các phần tử theo hàng
      2. column
         1. Sắp xếp theo cột
      3. row-reverse
         1. Sắp xếp theo hàng nhưng đảo ngược
      4. column-reverse
         1. Sắp xếp theo cột nhưng đảo ngược
   3. flex-wrap
      1. nowrap (default)
      2. wrap
      3. wrap-reverse
   4. flex-flow: flex-direction flex-wrap (shorthand)
   5. justify-content (căn theo main axis)
      1. flex-start hoặc flex-end: dồn về phía main-start hoặc main-end
      2. center: căn giữa
      3. space-between: căn đều (không để trống 2 bên)
      4. space-around: căn đều (để trống lề 2 bên sao cho 2 lề cộng lại bằng 1 gutter)
      5. space-evenly: cách đều lề và các phần tử bên cạnh.
      6. start hoặc end: theo hướng chữ viết hoặc ngược hướng chữ viết (một số quốc gia có chữ viết từ phải sang trái)
      7. left hoặc right: sang trái hoặc sang phải và không quan tân flex-direction.
   6. align-items (căn theo cross axis)
      1. Align-item căn các phần tử trên cùng 1 dòng theo cross-axis
      2. flex-start, flex-end, start, end, center: hoạt động giống như với justify-content nhưng áp dụng theo trục phụ khi còn không gian khả dụng.
      3. stretch: cố gắng kéo dài để lấp đầy vùng chứa mà vẫn tuân thủ width, height, max-width, max-height.
   7. align-content
      1. Căn các dòng theo trục phụ
      2. Chỉ hoạt động khi có ít nhất 2 dòng và còn không gian khả dụng
      3. Các thuộc tính hoạt động tương tự justify-content
   8. gap, row-gap, column-gap
      1. Khoảng cách giữa các phần tử (có thể thiết lập riêng cho hàng hoặc cột)
3. Item attributes
   1. order
      1. Thay đổi thứ tự sắp xếp của các item
      2. Nhận chỉ số nguyên (số 0, nguyên âm và nguyên dương)
   2. flex-basis
      1. Xác định kích thước ban đầu của item
      2. auto (default)
   3. flex-grow
      1. Xác định khả năng mở rộng của phần tử nếu cần thiết: Chỉ áp dụng khi có không gian khả dụng.
      2. flex-grow: 1
   4. flex-shrink
      1. Xác định khả năng co lại của phần tử nếu cần thiết: sẽ chỉ khả dụng nếu không gian khả dụng là âm
   5. flex: flex-grow flex-shrink flex-basis (shorthand)
   6. align-self
      1. căn chỉnh cho phần tử con riêng rẽ (ghi đè giá trị của thuộc tính align-items ở flex-container)