CSS justify-self รายการ

การใช้งานและการประกาศ

attribute justify-self จัดตั้งองค์ประกอบ grid ในทิศทางตารางภายในแนวทิศทางตารางของมัน:

สำหรับหน้าเว็บภาษาอังกฤษ ทิศทางตารางจะเป็นจากซ้ายไปขวา และทิศทางบล็อคจะเป็นไปข้างลง:

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

คำแนะนำ:ถ้าต้องการจัดตั้งองค์ประกอบ grid ในทิศทางบล็อค แทนที่จะใช้ทิศทางตาราง ใช้: attribute align-self หรือ attribute align-items attribute

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

เรียนรู้ CSS:CSS Grid

เรียนรู้ CSS:CSS Positioning

คู่มือ CSS:attribute align-content

คู่มือ CSS:attribute align-items

คู่มือ CSS:attribute align-self

คู่มือ CSS:attribute direction

คู่มือ CSS:attribute grid

คู่มือ CSS:attribute grid-template-columns

คู่มือ CSS:attribute position

คู่มือ CSS:attribute writing-mode

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

ตัวอย่าง

ตัวอย่าง 1

จัดตั้งองค์ประกอบ grid ตรงด้านขวาของแนวหน่วยตารางของมัน:

.red {
  display: grid;
  justify-self: right;
}

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

ตัวอย่าง 2: คำนำตัวอย่าง justify-self และ justify-items

จัดตั้งวิธีการปรับตัวขององค์ประกอบเรียบร้อยเป็น 'center' ต่อตัวแทน และจัดตั้งองค์ประกอบ grid ตัวเดียวเป็น 'right-align'. ค่า 'right' จะมีผลสูงสุด:

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

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

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

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

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: right;
}

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

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

เมื่อค่าของ属性 writing-mode ขององค์ประกอบ grid container ถูกกำหนดเป็น vertical-rl แล้ว ทิศทางของตารางจะไปข้างลง: ผลคือจุดเริ่มต้นของตัวแทนจะเคลื่อนย้ายมายังด้านบน และจุดสิ้นสุดของตัวแทนจะเคลื่อนย้ายมายังด้านล่าง:

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

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

ตัวอย่าง 5: direction

เมื่อตั้งค่าคุณสมบัติ direction ของอนุภาคตารางเป็น 'rtl' ทิศทางรวมจะเป็นทิศทางจากขวาไปที่ซ้าย。ผลลัพธ์คือจุดเริ่มต้นของตัวแทนจะย้ายจากด้านซ้ายไปที่ด้านขวา และจุดสิ้นสุดจะย้ายจากด้านขวาไปที่ด้านซ้าย:

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

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

การเขียน CSS

justify-self: auto|normal|stretch|การปรับเรียงตำแหน่ง|overflow-alignment|การปรับเรียงตรงเส้นพื้นฐาน|initial|inherit;

ค่าทางภาษาคอมพิวเตอร์

ค่า คำอธิบาย
auto ค่าเริ่มต้น
normal

ขึ้นอยู่กับสภาพแวดล้อมการจัดเรียง แต่เหมือนกับ 'stretch' ของอนุภาคตารางในการจัดเรียงแบบแนวแบบตารางเมื่อยังไม่ได้ตั้งค่า size

ถ้าได้ตั้งค่า size ก็จะทำงานเหมือน 'start'
stretch ถ้ายังไม่ได้ตั้งค่า inline-size (ความกว้าง) ก็จะขยายเพื่อที่จะติดตามแนวแบบตาราง
start จัดตัวของสิ่งที่ถูกจัดวางที่ต้นของทิศทางรวม
left จัดตัวของสิ่งที่ถูกจัดวางที่ด้านซ้าย
center จัดตัวของสิ่งที่ถูกจัดวางที่กลาง
end จัดตัวของสิ่งที่ถูกจัดวางที่ท้ายของทิศทางรวม
right จัดตัวของฝั่งขวา
overflow-alignment
  • 'safe' จะตั้งค่าการปรับเรียงของสิ่งที่ถูกจัดวางเป็น 'start' หากมีการหลุด
  • 'unsafe' จะเก็บค่าปรับเรียงตรงกันโดยไม่ว่าสิ่งที่ถูกจัดวางจะหลุดหรือไม่
การปรับเรียงตรงเส้นพื้นฐาน เอลิเมนต์เทียบตรงกับเส้นพื้นฐานของอนุภาคพ่อของเธอ
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น initial.
inherit ขอยืนยันจากเอลิเมนต์พ่อของเธอโดยสนับสนุนคุณสมบัตินี้ inherit.

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

ค่าเริ่มต้น: auto
เชื่อมโยง: ไม่
การสร้างอนุปราชญ์: ไม่สนับสนุน。อ่านต่อไปที่:คุณสมบัติที่เกี่ยวกับอนุปราชญ์.
เวอร์ชัน: CSS3
การเขียน JavaScript: object.style.justifySelf="right"

การสนับสนุนโปรแกรมน่าติดตาม

ตัวเลขในตารางชี้ถึงเวอร์ชันบราวเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。

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