CSS place-self ทางใช้

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

place-self มีความหมายเป็นการจัดตำแหน่งรายการกริดเดียว และเป็นสัญลักษณ์ของของคุณสมบัติต่อไปนี้:

• align-self
• justify-self

ถ้ามีค่าสองค่าของ place-self:

place-self: start center;

• ค่าของ align-self คือ 'start'
• ค่าของ justify-self คือ 'center'

ถ้ามีค่าเพียงหนึ่งค่าของ place-self:

place-self: end;

• ค่าของ align-self และ justify-self จะเป็น 'end'

ตัวอย่าง

ตัวอย่าง 1

จัดตำแหน่งรายการกริดเดียวในทิศทางแบบบล็อคและทิศทางแบบช่องเพื่อตรงกับตำแหน่งสุดท้าย:

#myDiv {
  place-self: end;
}

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

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

เมื่อมี <div> อิเล็มนต์ writing-mode เมื่อค่าของ属性เป็น 'vertical-rl' แล้ว ตำแหน่งของเซลล์กริดในทิศทางแบบบล็อคจะเลื่อนจากด้านล่างไปที่ด้านซ้าย และในทิศทางแบบช่องจะเลื่อนจากด้านขวาไปที่ด้านล่าง:

#contianer {
  display: grid;
  writing-mode: vertical-rl;
}
#myDiv {
  place-self: end;
}

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

ตัวอย่างที่ 3: การจัดระเบียบเบนนิ่ง

place-self อัตราการเอียงตัวก็สามารถใช้กับโครงการเบนนิ่งได้ แต่ justify-self ค่าที่สองจะถูกละเลย เพราะมันไม่เป็นไปได้ในการจัดระเบียบตัวเรียงเบนนิ่ง

#contianer {
  display: flex;
}
#myDiv {
  place-self: end stretch;
}

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

การเขียนรหัส CSS

place-self: auto|value|initial|inherit;

ค่าของอัตราการเอียงตัว

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

การสนับสนุนของบราวเซอร์

ตัวเลขในตารางแสดงการเวอร์ชันบราวเซอร์ที่สนับสนุนคุณสมบัตินี้ครบถ้วน

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

CSS ตัวแบบเล่นเนเบอร์แนบCSS 网格布局

CSS ตัวแบบเล่นเนเบอร์แนบการเรียนรู้：

CSS ตัวแบบเล่นรูปแบบแบบเกล็ดคุณสมบัติ align-self CSS

CSS ตัวแบบเล่นรูปแบบแบบเกล็ดCSS justify-self นิยาม

CSS ตัวแบบเล่นรูปแบบแบบเกล็ดCSS รูปแบบการเขียน