Thuộc tính căn chỉnh nội dung CSS
Thí dụ
Gói các đường về phía trung tâm của hộp đựng linh hoạt:
div
{
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
align-content: center;
}
Định nghĩa và Cách sử dụng
Thuộc align-content
tính sửa đổi hành vi của thuộc tính
flex-wrap . Nó tương tự như
căn chỉnh các mục , nhưng thay vì căn chỉnh các mục linh hoạt, nó căn chỉnh các đường linh hoạt.
Lưu ý: Phải có nhiều dòng mục thì thuộc tính này mới có hiệu lực!
Mẹo: Sử dụng thuộc tính justify-content để căn chỉnh các mục trên trục chính (theo chiều ngang).
Giá trị mặc định: | căng ra |
---|---|
Thừa hưởng: | không |
Hoạt hình: | không. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.alignContent = "center" |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Các số theo sau -webkit- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
align-content | 21.0 | 11.0 | 28.0 | 9.0 7.0 -webkit- |
12.1 |
Cú pháp CSS
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
stretch | Default value. Lines stretch to take up the remaining space | |
center | Lines are packed toward the center of the flex container | |
flex-start | Lines are packed toward the start of the flex container | |
flex-end | Lines are packed toward the end of the flex container | |
space-between | Lines are evenly distributed in the flex container | |
space-around | Lines are evenly distributed in the flex container, with half-size spaces on either end | |
space-evenly | Lines are evenly distributed in the flex container, with equal space around them | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Các trang liên quan
Tham chiếu CSS: thuộc tính align-items
Tham khảo CSS: thuộc tính align-self
Tham chiếu CSS: thuộc tính justify-content
Tham chiếu DOM HTML: thuộc tính alignContent