Thuộc tính nội dung hợp lý trong CSS
Ví dụ
Căn chỉnh các mục linh hoạt ở giữa vùng chứa:
div
{
display: flex;
justify-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 justify-content
dung 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 hết 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.
Lưu ý: Thuộc tính justify-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 nội tuyến. Đối với các trang bằng tiếng Anh, hướng nội tuyến là từ trái sang phải và hướng khối là hướng xuống dưới.
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ã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.
Các số theo sau là -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 | Demo ❯ |
flex-end | Items are positioned at the end of the container | Demo ❯ |
center | Items are positioned in the center of the container | Demo ❯ |
space-between | Items will have space between them | Demo ❯ |
space-around | Items will have space before, between, and after them | Demo ❯ |
space-evenly | Items will have 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ụ
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;
}
Hãy tự mình thử »Ví 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;
}
Hãy tự mình thử »Ví dụ
Hiển thị các mục linh hoạt có khoảng cách giữa các dòng:
div
{
display: flex;
justify-content: space-between;
}
Hãy tự mình thử »Ví dụ
Hiển thị các mục linh hoạt có khoảng trắng trước, giữa và sau các dòng:
div
{
display: flex;
justify-content: space-around;
}
Hãy tự mình thử »Ví dụ với lưới
Hiển thị các mục lưới đến cuối:
#container
{
display: grid;
justify-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 nội dung
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 chiếu DOM HTML: thuộc tính JustContent