CSS max-inline-size ขนาดสูงสุดทางนอก

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

max-inline-size คุณสมบัตินี้กำหนดขนาดใหญ่ที่สุดขององค์ประกอบในแนวในรูปภาพ。

ถ้าขนาดของเนื้อหาในแนวในรูปภาพน้อยกว่าขนาดสูงสุด จะมีผลต่อ: max-inline-size ค่าคุณสมบัติไม่มีผล。

ถ้าขนาดของเนื้อหาในแนวในรูปภาพมากกว่าขนาดสูงสุด จะมีผลต่อ: max-inline-size ค่าคุณสมบัติ。

ข้อเน้น:คุณสมบัติ CSS ที่เกี่ยวข้อง writing-mode กำหนดแนวในรูปภาพ ซึ่งจะมีผลต่อ: max-inline-size ผลของคุณสมบัติ。สำหรับหน้าเว็บที่ใช้ภาษาอังกฤษ แนวบล็อคจะด้านลง และแนวในรูปภาพจะเป็นทิศทางจากซ้ายไปขวา。

CSS max-inline-size คุณสมบัตินี้เกี่ยวข้องกับคุณสมบัติ CSS หน้าก่อน และ max-width เหมือนกันมาก แต่ max-inline-size คุณสมบัตินี้ขึ้นอยู่กับแนวในรูปภาพ。

ตัวอย่าง

ตัวอย่างที่ 1

ตั้งค่าขนาดใหญ่ที่สุดขององค์ประกอบ <div> ในทิศทางรูปภาพอยู่แนวใน 60 พิกเซล:

div {
  max-inline-size: 60px;
}

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

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

ตั้งค่าองค์ประกอบ <div> ของคุณเป็น: writing-mode เมื่อคุณสมบัติถูกตั้งเป็น vertical-rl แล้ว แนวในรูปภาพจะเปลี่ยนจากทิศทางด้านข้างเป็นทิศทางลง ซึ่งจะมีผลต่อ: max-inline-size วิธีที่คุณสมบัติทำงาน:

div {
  max-inline-size: 60px;
  writing-mode: vertical-rl;
}

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

ตัวอย่างที่ 3: Max-inline-size vs Inline-size

จับตาดูองค์ประกอบ <div> (inline-size 100px) และองค์ประกอบ <div> อื่น ๆ (max-inline-size การตอบสนองต่อความเปลี่ยนแปลงของขนาดเนื้อหา (100px):

#div1 {
  max-inline-size: 100px;
}
#div2 {
  inline-size: 100px;
}

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

ระบบการเขียน CSS

max-inline-size: auto|length|initial|inherit;

ค่าคุณสมบัติ

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

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

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

44.0

เพิ่มเติม:CSS inline-size ขนาด inline

เพิ่มเติม:CSS min-inline-size ขนาดต่ำสุดทางนอก

เพิ่มเติม:CSS max-height ความสูงสูงสุด

เพิ่มเติม:CSS max-width ความกว้างสูงสุด

เพิ่มเติม:CSS writing-mode ทางนักวาฏยกรรม