Thuộc tính căn chỉnh nội dung CSS
Ví dụ
Đóng gói các dòng hướng về phía trung tâm của thùng chứa linh hoạt:
div {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
align-content: center;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính align-content
chỉ định cách phân phối các dòng flex dọc theo trục chéo trong vùng chứa flexbox.
Trong bố cục flexbox, trục chính nằm theo flex-direction
(mặc định là 'hàng', ngang) và trục chéo vuông góc với trục chính (mặc định là 'cột', dọ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).
Lưu ý: Thuộc tính align-content
cũng có thể được sử dụng trên vùng chứa lưới để căn chỉnh các mục lưới theo hướng khối. Đối với các trang bằng tiếng Anh, hướng khối là hướng xuống và hướng nội tuyến là từ trái sang phải.
Giá trị mặc định: | kéo dài |
---|---|
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ãy dùng thử |
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.
Property | |||||
---|---|---|---|---|---|
align-content | 57.0 | 16.0 | 52.0 | 10.1 | 44.0 |
Cú pháp CSS
align-content: stretch|center|flex-start|flex-end|space-between|space-around|space-evenly|initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
stretch | Default value. Lines stretch to take up the remaining space | Demo ❯ |
center | Lines are packed toward the center of the flex container | Demo ❯ |
flex-start | Lines are packed toward the start of the flex container | Demo ❯ |
flex-end | Lines are packed toward the end of the flex container | Demo ❯ |
space-between | Lines are evenly distributed in the flex container | Demo ❯ |
space-around | Lines are evenly distributed in the flex container, with half-size spaces on either end | Demo ❯ |
space-evenly | Lines are evenly distributed in the flex container, with equal space around them | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ với lưới
Tất cả các mục được định vị ở cuối vùng chứa lưới, theo hướng khối:
#container {
display: grid;
align-content: end;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: CSS flexbox
Hướng dẫn CSS: Lưới CSS
Tham khảo CSS: thuộc tính căn chỉnh các mục
Tham khảo CSS: thuộc tính tự căn chỉnh
Tham khảo CSS: thuộc tính biện minh cho nội dung
Tham chiếu DOM HTML: thuộc tính AlignContent