Biện minh-mục - Thủ thuật CSS

Các justify-itemsbất động sản là một tiểu tài sản của CSS Hộp Alignment Mô-đun mà về cơ bản kiểm soát sự liên kết các mặt hàng lưới trong phạm vi của họ.

.element ( justify-items: center; )

justify-itemscăn chỉnh các mục lưới dọc theo trục hàng (nội dòng). Cụ thể, khách sạn này cho phép bạn thiết lập sự liên kết cho các hạng mục bên trong một container lưới (không phải là lưới riêng của mình) ở một vị trí cụ thể (ví dụ start, centervà end) hoặc với một hành vi (ví dụ autohay stretch).

Khi justify-itemsđược sử dụng, nó cũng đặt justify-selfgiá trị mặc định cho tất cả các mục lưới, mặc dù điều này có thể được ghi đè ở cấp con bằng cách sử dụng thuộc justify-selftính trên chính con.

.grid ( display: grid; justify-items: center; ) .grid-item ( justify-self: start; )

Cú pháp

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )

• Giá trị ban đầu: legacy
• Áp dụng cho: tất cả các phần tử
• Kế thừa: không
• Giá trị tính toán: như đã chỉ định
• Loại hoạt ảnh: rời rạc

Giá trị

/* Basic keyword values */ justify-items: auto; justify-items: normal; justify-items: stretch; /* Baseline alignment */ justify-items: baseline; justify-items: first baseline; justify-items: last baseline; /* Positional alignment */ justify-items: center; justify-items: start; justify-items: end; justify-items: flex-start; justify-items: flex-end; justify-items: self-start; justify-items: self-end; justify-items: left; justify-items: right; /* Overflow alignment */ /* Used as an optional second value for positional alignment */ justify-items: safe; justify-items: unsafe; /* Legacy */ justify-items: legacy center; justify-items: legacy left; justify-items: legacy right; /* Global values */ justify-items: inherit; justify-items: initial; justify-items: unset;

Giá trị từ khóa cơ bản

• stretch: Giá trị mặc định. Căn chỉnh các mục để lấp đầy toàn bộ chiều rộng của ô mục lưới
• auto: giống như giá trị của justify-itemstrong cha.
• normal: Mặc dù chúng tôi thấy justify-itemsđược sử dụng thường xuyên nhất trong bố cục lưới, nhưng về mặt kỹ thuật, nó là cho bất kỳ căn chỉnh hộp nào và normalcó nghĩa là những thứ khác nhau trong ngữ cảnh bố cục khác nhau, bao gồm:
  • bố cục cấp khối ( start)
  • bố cục lưới stretch
  • flexbox (bỏ qua)
  • ô bảng (bị bỏ qua)
  • bố cục đúng vị trí ( start)
  • hộp định vị tuyệt đối ( stretch)
  • đã thay thế các hộp được định vị hoàn toàn ( start)

.container ( justify-items: stretch; )

Giá trị căn chỉnh đường cơ sở

Điều này sẽ căn chỉnh đường cơ sở căn chỉnh của tập hợp đường cơ sở đầu tiên hoặc cuối cùng của hộp với đường cơ sở tương ứng của ngữ cảnh căn chỉnh của nó.

.container ( justify-items: baseline; )

• Căn chỉnh dự phòng cho first baselinelà safe start.
• Căn chỉnh dự phòng cho last baselinelà safe end.
• baselinetương ứng với first baselinekhi được sử dụng một mình

Trong bản trình diễn bên dưới (được xem tốt nhất trong Firefox), chúng ta thấy cách các phần tử căn chỉnh với đường cơ sở của lưới dựa trên trục chính.

Giá trị căn chỉnh vị trí

• start: Căn chỉnh các mục với cạnh bắt đầu của vùng chứa căn chỉnh
• end: Căn chỉnh các mục với vùng chứa căn chỉnh cạnh cuối
• center: Căn chỉnh các mục ở giữa vùng chứa căn chỉnh
• left: Căn chỉnh các mục ở bên trái của vùng chứa căn chỉnh
• right: Căn chỉnh các mục ở bên phải của vùng chứa căn chỉnh
• self-start: Căn chỉnh các mục ở đầu mỗi ô mục lưới
• self-end: Căn chỉnh các mục ở cuối mỗi ô mục lưới

.container ( justify-items: )

.container ( justify-items: )

.container ( justify-items: center; )

Giá trị căn chỉnh bổ sung

Các tràn tài sản xác định làm thế nào nó sẽ hiển thị nội dung của lưới điện khi nội dung vượt quá giới hạn biên của lưới điện. Vì vậy, khi nội dung lớn hơn vùng chứa căn chỉnh, nó sẽ dẫn đến tràn và có thể dẫn đến mất dữ liệu. Để ngăn chặn điều này, chúng ta có thể sử dụng safegiá trị yêu cầu trình duyệt thay đổi căn chỉnh để không bị mất dữ liệu.

• safe : Nếu một mục làm tràn vùng chứa căn chỉnh, startchế độ sẽ được sử dụng.
• unsafe : Giá trị căn chỉnh được giữ nguyên, không phân biệt kích thước mặt hàng hoặc vùng chứa căn chỉnh.

Giá trị kế thừa

• legacy : Khi sử dụng với một từ khóa định hướng (ví dụ right, lefthay center), từ khóa đó được truyền cho con cháu để kế thừa. Nhưng nếu con cháu khai báo justify-self: auto;thì legacybị bỏ qua nhưng vẫn tôn trọng từ khóa hướng. Giá trị tính theo giá trị kế thừa nếu không có từ khóa hướng nào được cung cấp. Nếu không, nó sẽ tính đến normal.

Bản giới thiệu

Thêm thông tin

• Mô-đun căn chỉnh hộp CSS cấp 3 (Bản thảo đang làm việc)
• Hướng dẫn hoàn chỉnh về lưới
• Hướng dẫn đầy đủ về Flexbox

Hỗ trợ trình duyệt

justify-itemsLoại hỗ trợ trình duyệt chạy gam màu vì nó được sử dụng trong nhiều ngữ cảnh bố cục, như ô lưới, ô linh hoạt, ô bảng. Nhưng nói chung, nếu lưới và hộp linh hoạt được hỗ trợ, thì bạn có thể cho rằng điều đó justify-itemslà tốt.

Bố cục lưới

I E	Cạnh	Firefox	Trình duyệt Chrome	Safari	Opera
Không	16+	45+	57+	10.1+	44+

Chrome dành cho Android	Android Firefox	Trình duyệt Android	iOS Safari	Opera Mobile
81+	45+	81+	10.1+	59+

Bố cục linh hoạt

I E	Cạnh	Firefox	Trình duyệt Chrome	Safari	Opera
Không	12+	20+	52+	9+	12,1+

Chrome dành cho Android	Android Firefox	Trình duyệt Android	iOS Safari	Opera Mobile
87+	83+	81+	9+	12,1+

Thuộc tính liên quan

Almanac vào ngày 27 tháng 10 năm 2019

căn chỉnh các mục

Geoff Graham