Thuộc tính align-content CSS

Định nghĩa và cách sử dụng

align-content Chỉnh sửa thuộc tính Thuộc tính flex-wrap Hành vi của thuộc tính. Nó tương tự như align-items Tương tự, nhưng nó không đối齐 các phần tử弹性, mà là đối齐 các đường弹性.

Chú ý:Phải có nhiều dòng mục, thuộc tính này mới hoạt động!

Lưu ý:Sử dụng justify-content Thuộc tính này có thể đối齐 các phần tử theo phương chính (main-axis).

Xem thêm:

Hướng dẫn CSS:Flexbox trong CSS

Hướng dẫn CSS:CSS Grid

Tài liệu tham khảo CSS:Thuộc tính alignItems

Tài liệu tham khảo CSS:Thuộc tính alignSelf

Tài liệu tham khảo CSS:Thuộc tính justifyContent

Tài liệu tham khảo HTML DOM:Thuộc tính alignContent

Mẫu

Gói dòng vào trung tâm của khối弹性:

div {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Thử ngay

Cú pháp CSS

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
stretch Giá trị mặc định. Dòng kéo dãn để chiếm thêm không gian.
center Gói dòng theo hướng trung tâm của khối弹性.
flex-start Gói dòng theo hướng đầu của khối弹性.
flex-end Gói dòng theo hướng cuối của khối弹性.
space-between Dòng được phân phối đều trong khối弹性.
space-around Dòng được phân phối đều trong khối弹性, mỗi đầu chiếm một nửa.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: stretch
Kế thừa: Không
Ch製 động: Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến động.
Phiên bản: CSS3
Cú pháp JavaScript: object.style.alignContent="center"

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0