Các thuộc tính Flex Container trong CSS

Flex Container (phần tử cha có display: flex hoặc inline-flex) sở hữu 6 thuộc tính chính để điều khiển layout:

Danh sách 6 thuộc tính container

Thuộc tính	Chức năng	Trục
`flex-direction`	Hướng xếp items (row/column)	Main axis
`flex-wrap`	Cho phép xuống dòng (wrap/nowrap)	Main axis
`flex-flow`	Shorthand: direction + wrap	Main axis
`justify-content`	Căn items trên trục chính	Main axis
`align-items`	Căn items trên trục chéo (mỗi dòng)	Cross axis
`align-content`	Căn các dòng (khi wrap)	Cross axis

Mối quan hệ trục

flex-direction: row (mặc định)
Main Axis:  ←────────────────→ (justify-content)
Cross Axis: ↓                (align-items / align-content)

flex-direction: column
Main Axis:  ↓                (justify-content)
Cross Axis: ←────────────────→ (align-items / align-content)

Ví dụ tổng hợp

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: space-around;
  gap: 1rem;
}

Lưu ý quan trọng

align-content chỉ hoạt động khi có flex-wrap: wrap và nhiều dòng
align-items áp dụng cho từng dòng riêng lẻ
gap (hỗ trợ Flexbox hiện đại) thay thế margin cho khoảng cách
Sử dụng flex-flow thay vì viết riêng direction + wrap

Flex Item Properties (thuộc tính cho phần tử con)

Xem bài: CSS flex item properties để biết order, flex-grow, flex-shrink, flex-basis, flex, align-self.