CSS place-items ทางค่า

การระบุและการใช้งาน

place-items ตัวแปลงใช้สำหรับเล็กเล็กๆเนื้อหาเชิงเน้นเชิงรูปแบบเดียวกับตัวแปลงต่อไปนี้：

• align-items
• justify-items

ถ้าคุณมีค่า place-items สองค่าเท่านั้น：

place-items: start center;

• คุณมีค่า align-items คือ 'start'
• คุณมีค่า justify-items คือ 'center'

ถ้าคุณมีค่า place-items แค่หนึ่งค่าเท่านั้น：

place-items: end;

• จึงค่าของคุณสมบัติ align-items และ justify-items จะเป็น 'end'

ตัวอย่าง

ตัวอย่าง 1

จัดตัว <div> ในตำแหน่งเริ่มต้นของทิศทางแนวตรงและทิศทางบล็อคของช่องเครืองตาราง

#container {
  place-items: start;
}

ลองด้วยตัวเอง

ตัวอย่าง 2: รูปแบบการเขียน

เมื่อมีการตั้งค่าคุณสมบัติของเครืองตาราง writing-mode เมื่อคุณตั้งค่าคุณสมบัติ writing-mode ให้เป็น 'vertical-rl' จะมีการเคลื่อนที่จุดสิ้นสุดของทิศทางบล็อคจากด้านล่างมายังด้านซ้าย และจุดสิ้นสุดของทิศทางในแนวของจุดยืนจากด้านขวามายังด้านล่าง

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

ลองด้วยตัวเอง

ตัวอย่าง 3: แบบจัดเตรียมแบบแถว

justify-items คุณสมบัติไม่สนับสนุนโดยแบบจัดเตรียมแบบแบบแถว place-items คุณสมบัติjustify-items ค่าที่อยู่ในตำแหน่งที่สอง (คือค่าที่สอง) จะถูกละเลย

#wrapper {
  place-items: stretch end;
}

ลองด้วยตัวเอง

การเขียนบทความ CSS

place-items: normal legacy|value|initial|inherit;

ค่าทางตัวเลข

รายละเอียดเทคโนโลยี

การสนับสนุนโปรแกรมน่าเชื่อถือ

ตัวเลขในตารางนี้แสดงรุ่นที่แรกที่เสร็จสมบูรณ์ในการสนับสนุนคุณสมบัตินี้

เพจที่เกี่ยวข้อง

ตัวเรียกนี้เรียกว่า:CSS ตารางโซ่

ตัวเรียกนี้เรียกว่า:CSS 弹性盒布局

อ้างอิง:ตัวแปรที่เกี่ยวข้องกับ CSS align-items

อ้างอิง:CSS justify-items คุณสมบัติ

อ้างอิง:คุณภาพ writing-mode ของ CSS