1. คุณลักษณะ align-self กำหนดการจัดตำแหน่งของรายการดิ้นทีละรายการในทิศทางของแกนด้านข้าง (แกนแนวตั้ง)
2. align-self มีอัตโนมัติเพิ่มเติม (ค่าเริ่มต้น) ซึ่งแสดงถึงค่าแอตทริบิวต์ align-items ที่สืบทอดมาจากคอนเทนเนอร์ดิ้น
ตัวอย่าง
.คอนเทนเนอร์{
/* กำหนดคอนเทนเนอร์เฟล็กซ์ */
จอแสดงผล: ดิ้น;
-
กำหนดทิศทางการจัดเรียงองค์ประกอบภายในแถวคอนเทนเนอร์: กำหนดทิศทางการจัดเรียงจากซ้ายไปขวาแถวย้อนกลับ: จากขวาไปซ้ายคอลัมน์: จากบนลงล่างคอลัมน์ย้อนกลับ: จากล่างขึ้นบน
-
ทิศทางแบบยืดหยุ่น: แถว;
-
ตั้งค่าการจัดตำแหน่งขององค์ประกอบในคอนเทนเนอร์บนการยืดแกนขวาง: เมื่อไม่ได้ตั้งค่าความสูงขององค์ประกอบ ความสูงขององค์ประกอบจะถูกขยายให้มีความสูงเท่ากับคอนเทนเนอร์ (ค่าเริ่มต้น)
flex-start: ไปยังตำแหน่งเริ่มต้น (ขึ้น/ซ้าย) บนแกนกากบาท จัดแนว flex-end: ไปทางตำแหน่งสิ้นสุด (ลง/ขวา) บนแกนกากบาท องค์ประกอบอยู่พร้อมๆ กัน เป็นบรรทัดฐาน (ตรวจสอบให้แน่ใจว่าทุกข้อความอยู่ในบรรทัดเดียวกัน)
-
จัดรายการ: พื้นฐาน;
ส่วนสูง: 800upx;
สีพื้นหลัง: #FFC0CB;
-
.txt{
ขนาดตัวอักษร: 20px;
ความกว้าง: 150upx;
ส่วนสูง: 150upx;
-
.สีแดง{
สีพื้นหลัง: สีแดง;
-
เขียนการจัดตำแหน่งขององค์ประกอบในคอนเทนเนอร์บนแกนไขว้อัตโนมัติ: ค่าเริ่มต้น ซึ่งระบุการสืบทอดคุณสมบัติการจัดตำแหน่งรายการของการยืดองค์ประกอบหลัก: เมื่อไม่ได้ตั้งค่าความสูงขององค์ประกอบ ความสูงขององค์ประกอบจะถูกขยายให้เท่ากัน ความสูงเท่ากับคอนเทนเนอร์ (ค่าเริ่มต้น)
flex-start: ไปยังตำแหน่งเริ่มต้น (ขึ้น/ซ้าย) บนแกนกากบาท จัดแนว flex-end: ไปทางตำแหน่งสิ้นสุด (ลง/ขวา) บนแกนกากบาท องค์ประกอบอยู่พร้อมๆ กัน เป็นบรรทัดฐาน (ตรวจสอบให้แน่ใจว่าทุกข้อความอยู่ในบรรทัดเดียวกัน)
-
จัดตัวเอง: กึ่งกลาง;
-
.สีเขียว{
สีพื้นหลัง: สีเขียว;
-
.สีฟ้า{
สีพื้นหลัง: สีฟ้า;
-ข้างต้นนี้เป็นการแนะนำคุณลักษณะ align-self ใน CSS ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน