CSS justify-items ความสามารถ

การกำหนดและการใช้งาน

คุณสมบัติ justify-items มีการตั้งค่าบนองค์ประกอบกริดที่ทำให้ตัวเล็กที่เป็นหนึ่งในเด็ก (องค์ประกอบกริด) จัดตัวตามทางที่ยื่นขึ้นไปข้างลง

สำหรับหน้าเว็บที่ใช้ภาษาอังกฤษ ทางที่ยื่นขึ้นไปข้างลงจะเป็นทางยื่นขึ้นไปข้างซ้าย และทางที่เป็นบล็อคจะเป็นทางยื่นขึ้นไปข้างลง

ถ้าต้องการให้คุณสมบัติมีผลต่อการจัดตัว องค์ประกอบกริดจะต้องมีช่องว่างที่สามารถใช้งานได้บริเวณทางที่ยื่นขึ้นไปข้างลงในตัวเอง

คำเตือน:ถ้าต้องการจัดตัวองค์ประกอบกริดในทางที่เป็นบล็อคแทนที่จะเป็นทางยื่นขึ้นไปข้างลง ใช้ คุณสมบัติ align-items คุณสมบัติ

ดูเพิ่มเติม:

ตำแหน่ง CSS:CSS Grid

ตำแหน่ง CSS:การตั้งตำแหน่ง CSS

คู่มือ CSS:คุณสมบัติ align-items

คู่มือ CSS:คุณสมบัติ direction

คู่มือ CSS:คุณสมบัติ grid

คู่มือ CSS:คุณสมบัติ grid-template-columns

คู่มือ CSS:คุณสมบัติ justify-self

คู่มือ CSS:คุณสมบัติ position

คู่มือ CSS:คุณสมบัติ writing-mode

ตัวอย่าง

ตัวอย่าง 1

จัดตัวองค์ประกอบกริดในทางที่ยื่นขึ้นไปข้างลงของหน่วยกริดของตนเอง

#container {
  display: grid;
  justify-items: end;
}

親自試一試

ตัวอย่าง 2: การเปรียบเทียบ justify-items กับ justify-self

ตั้งค่าการจัดตัวที่เป็น 'ตั้งตำแหน่งกลาง' ต่อองค์ประกอบกริดเมื่อเปรียบเทียบกับการตั้งค่า justify-self องค์ประกอบกริดเป็น 'ตั้งตำแหน่งด้านขวา'. ค่า 'right' จะเป็นค่าที่มีผลบวกขึ้นมากที่สุด:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

親自試一試

ตัวอย่าง 3: ตั้งค่า justify-items บนองค์ประกอบกริดที่มีการตั้งตำแหน่งที่เป็นตัวเดี่ยว

ตั้งค่าการจัดตัวขององค์ประกอบกริดที่มีการตั้งตำแหน่งที่เป็นตัวเดี่ยวเป็น 'ตั้งตำแหน่งด้านขวา':

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

親自試一試

ตัวอย่าง 4: writing-mode

เมื่อค่าของคุณสมบัติ writing-mode ขององค์ประกอบกริดมีค่าเท่ากับ vertical-rl จะมีการเรียงลำดับของตัวอักษรภายในตัวเล็กที่มีการยื่นขึ้นไปข้างลง

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}

親自試一試

例子 5：direction

當網格容器元素的 direction 屬性值設置為“rtl”時，行內方向從右到左。結果是容器的起點從左側移到右側，容器的末端從右側移到左側：

#container {
  justify-items: start;
  direction: rtl;
}

親自試一試

CSS 語法

justify-items: legacy|normal|stretch|positional alignment|overflow-alignment|baseline alignment|initial|inherit;

屬性值

值 描述
legacy

默認值。

僅在以'legacy'開頭時，justify-self 值為'auto'的網格項繼承網格容器的 justify-items 屬性值。

它的存在是為了實現 HTML 的 <center> 元素和 align 屬性的遺留對齊行為。
normal 取決於佈局上下文，但類似於網格佈局的 'stretch'。
stretch 如果未設定 inline-size（寬度），則拉伸以填充網格單元格。
start 在行內方向開頭對齊項目。
left 將項目左對齊。
center 將項目對齊到中心。
end 在行內方向的末尾對齊項目。
right 將項目右對齊。
overflow-alignment
  • 'safe' 將會將項目的對齊方式設定為 'start'，如果內容溢出。
  • 'unsafe' 保持對齊值，無論項目內容是否溢出。
baseline-alignment 元素與父元素的基線對齊。
initial 將此屬性設定為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

默認值： legacy
繼承： 否
動畫製作： 不支持。請參閱：動畫相關屬性。
版本： CSS3
JavaScript 語法： object.style.justifyItems="center"

瀏覽器支持

表中的數字注明了首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0