flex-wrap hoạt động thế nào?

flex-wrap quyết định item có được xuống dòng khi hết chỗ hay không.

.row {
  display: flex;
  flex-wrap: nowrap;      /* mặc định: ép tất cả trên MỘT dòng, co lại nếu cần */
}

.tags {
  display: flex;
  flex-wrap: wrap;        /* hết chỗ thì xuống dòng */
  gap: 8px;
  align-content: flex-start;   /* căn các DÒNG, chỉ có tác dụng khi đã wrap */
}

Phân biệt hai thuộc tính hay bị lẫn khi đã wrap:
- align-items — căn từng item trong một dòng.
- align-content — căn các dòng với nhau trong container.

Shorthand gộp hướng và wrap:

.list { flex-flow: row wrap; }   /* = flex-direction + flex-wrap */

Lưu ý 1: nowrap không có nghĩa "tràn ra ngoài" — mặc định item sẽ co lại (flex-shrink: 1). Chỉ khi nội dung không co được nữa (min-width: auto) mới tràn.

Lưu ý 2: align-content không có tác dụng khi chỉ có một dòng. Nhiều người đặt nó rồi tưởng bị lỗi, trong khi thực ra cần align-items.