Thuộc tính justify-content CSS
Thí dụ
Căn chỉnh các mục linh hoạt ở tâm của thùng chứa:
div
{
display: flex;
justify-content: center;
}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc justify-content
tính căn chỉnh các mục của vùng chứa linh hoạt khi các mục không sử dụng tất cả không gian có sẵn trên trục chính (theo chiều ngang).
Mẹo: Sử dụng thuộc tính align-items để căn chỉnh các mục theo chiều dọc.
Giá trị mặc định: | khởi động linh hoạt |
---|---|
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: | object .style.justifyContent = "space-between" |
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- hoặc -moz- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
justify-content | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
Cú pháp CSS
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
flex-start | Default value. Items are positioned at the beginning of the container | |
flex-end | Items are positioned at the end of the container | |
center | Items are positioned in the center of the container | |
space-between | Items will have space between them | |
space-around | Items will have space before, between, and after them | |
space-evenly | Items will have 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 ví dụ khác
Thí dụ
Căn chỉnh các mục linh hoạt ở đầu vùng chứa (đây là mặc định):
div
{
display: flex;
justify-content: flex-start;
}
Thí dụ
Căn chỉnh các mục linh hoạt ở cuối vùng chứa:
div
{
display: flex;
justify-content: flex-end;
}
Thí dụ
Hiển thị các mục linh hoạt với khoảng cách giữa các dòng:
div
{
display: flex;
justify-content: space-between;
}
Thí dụ
Hiển thị các mục linh hoạt với khoảng trống trước, giữa và sau các dòng:
div
{
display: flex;
justify-content: space-around;
}
Các trang liên quan
Tham chiếu CSS: thuộc tính align-content
Tham chiếu CSS: thuộc tính align-items
Tham khảo CSS: thuộc tính align-self
Tham chiếu DOM HTML: thuộc tính justifyContent