CSS Flexbox Layout Module

Flexbox (Flexible Box Layout Module) là mô-đun bố cục 1 chiều mạnh mẽ của CSS, thiết kế cho việc phân phối không gian và căn chỉnh items trong container, ngay cả khi kích thước không xác định hoặc động.

Khái niệm cốt lõi

Flex Container: Phần tử cha có display: flex hoặc inline-flex
Flex Items: Các phần tử con trực tiếp của flex container
Main Axis: Trục chính (xác định bởi flex-direction)
Cross Axis: Trục chéo (vuông góc main axis)

6 Thuộc tính Flex Container

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

6 Thuộc tính Flex Items

Thuộc tính	Chức năng
`order`	Thứ tự hiển thị (mặc định 0)
`flex-grow`	Khả năng phóng to (mặc định 0)
`flex-shrink`	Khả năng co lại (mặc định 1)
`flex-basis`	Kích thước cơ sở (mặc định auto)
`flex`	Shorthand: grow shrink basis
`align-self`	Ghi đè align-items cho 1 item

Ví dụ cơ bản

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.item {
  flex: 1 1 200px; /* grow shrink basis */
}
.item:first-child {
  align-self: flex-start;
}

Khi nào dùng Flexbox vs Grid?

Flexbox	CSS Grid
1D layout (hàng HOẶC cột)	2D layout (hàng VÀ cột)
Content-first (kích thước theo content)	Layout-first (kích thước theo track)
Navbar, card, form, center	Page layout, dashboard, gallery
Items quyết định size	Container quyết định tracks

Browser Support