Thuộc tính CSS justify-content

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

Thuộc tính justify-content (ngang) canh các mục của khung flex, khi các mục không chiếm hết không gian có sẵn trên trục chính.

Lưu ý:Vui lòng sử dụng align-items thuộc tính Thuộc tính canh ngang các mục.

Xin xem thêm:

CSS Hướng dẫn:Flexbox CSS

CSS Hướng dẫn:CSS Grid

Hướng dẫn CSS:align-content thuộc tính

Hướng dẫn CSS:align-items thuộc tính

Hướng dẫn CSS:Thuộc tính align-self

Hướng dẫn HTML DOM:Thuộc tính justifyContent

Mô hình

Chỉnh chỉnh các phần tử弹性 ở trung tâm khay:

div {
  display: flex;
  justify-content: center;
}

Thử nghiệm trực tiếp

Bạn có thể tìm thêm các ví dụ TIY dưới cùng của trang.

Cú pháp CSS

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

Giá trị thuộc tính

Giá trị Mô tả
flex-start Giá trị mặc định. Các phần tử nằm ở đầu khay.
flex-end Các phần tử nằm ở cuối khay.
center Các phần tử nằm ở trung tâm của khay.
space-between Các phần tử để trống giữa các dòng.
space-around Các phần tử để trống trước, giữa và sau dòng.
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: flex-start
Kế thừa: Không
Tạo animation: Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: CSS3
Cú pháp JavaScript: object.style.justifyContent="space-between"

Các ví dụ khác

Mô hình

Chỉnh chỉnh các phần tử弹性 ở đầu khay (mặc định):

div {
  display: flex;
  justify-content: flex-start;
}

Thử nghiệm trực tiếp

Mô hình

Chỉnh chỉnh các phần tử弹性 ở cuối khay:

div {
  display: flex;
  justify-content: flex-end;
}

Thử nghiệm trực tiếp

Mô hình

Hiển thị các phần tử弹性 với khoảng cách giữa các dòng:

div {
  display: flex;
  justify-content: space-between;
}

Thử nghiệm trực tiếp

Mô hình

Hiển thị các phần tử弹性 với khoảng cách giữa các dòng, trước dòng, giữa các dòng và sau dòng:

div {
  display: flex;
  justify-content: space-around;
}

Thử nghiệm trực tiếp

Hỗ trợ trình duyệt

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

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này với tiền tố -webkit- hoặc -moz-.

thuộc tính Chrome IE Firefox Safari Opera
justify-content 29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0