Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

จัดตำแหน่ง List Items ให้ตรงกันตามความสูงคอลัมน์ด้วย Flexbox

ใช้ Flexbox จัดให้คอลัมน์สูงเท่ากัน และรายการจัดตำแหน่งด้านล่าง

CSS สำหรับ Wrapper และ Columns

.wrap {
    display: flex;
}
.wrap .col {
    flex: 1 0 33%; /* ขยายเท่าๆ กัน ความกว้างพื้นฐาน 33% */
}

จัดรายการให้อยู่ด้านล่าง (Vertical Align Bottom)

.col .content {
    margin-top: auto; /* ดันเนื้อหาไปด้านล่าง */
}

Flexbox ทำให้คอลัมน์มีความสูงเท่ากันอัตโนมัติ และ margin-top: auto จัดให้ content ติดด้านล่าง