align-items: căn từng item bên trong dòng (line) của nó, theo trục cross.align-content: căn cả tập hợp các dòng so với container, cũng theo trục cross.
align-content chỉ có tác dụng khi container có nhiều dòng và còn không gian thừa trên trục cross. Đó là lý do hay gặp: trong flex container mặc định (flex-wrap: nowrap) chỉ có một dòng nên align-content bị bỏ qua hoàn toàn.
css
.wrap {
display: flex;
flex-wrap: wrap; /* bắt buộc, nếu không align-content vô nghĩa */
height: 400px; /* phải có không gian thừa */
align-content: center; /* dồn các dòng vào giữa */
align-items: center; /* căn item trong từng dòng */
}Với Grid thì align-content luôn dùng được vì grid vốn nhiều hàng — nó dịch chuyển toàn bộ track theo chiều dọc trong container cao hơn nội dung.