Thuộc tính justifyContent của Style

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

Khi các phần tử không sử dụng tất cả không gian khả dụng trên trục chính (ngang), justifyContent Canh chỉnh các phần tử của container co giãn.

Lưu ý:Hãy sử dụng alignContent Canh chỉnh các phần tử theo trục ngang (thẳng đứng).

Xem thêm:

Hướng dẫn tham khảo CSS:Thuộc tính justifyContent

Mô hình

Để lại không gian giữa các phần tử của thẻ <div> co giãn:

document.getElementById("main").style.justifyContent = "space-between";

Thử nghiệm trực tiếp

Cú pháp

Trả về thuộc tính justifyContent:

object.style.justifyContent

Đặt thuộc tính justifyContent:

object.style.justifyContent = "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 của container.
flex-end Các phần tử nằm ở cuối cùng của container.
center Các phần tử nằm ở trung tâm của容器.
space-between Để lại không gian cho các phần tử giữa dòng.
space-around Để lại không gian cho các phần tử giữa dòng trước, giữa dòng và dòng sau.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Thừa kế 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
Giá trị trả về: Chuỗi biểu thị Thuộc tính justifyContent.
Phiên bản CSS: CSS3

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ 12.0 Hỗ trợ 9.0 Hỗ trợ

Trang liên quan

Hướng dẫn tham khảo HTML DOM STYLE:Thuộc tính alignContent

Hướng dẫn tham khảo HTML DOM STYLE:Thuộc tính alignItems

Hướng dẫn tham khảo HTML DOM STYLE:Thuộc tính alignSelf