align-items — จัดบนแกนขวาง
ค่าที่ใช้บ่อย
stretch (เริ่มต้น) · flex-start · flex-end · center · baseline
.nav {
display: flex;
align-items: center; /* โลโก้กับลิงก์สูงไม่เท่ากัน แต่กึ่งกลางแนวขวาง */
min-height: 56px;
}
จับคู่กับ justify
กึ่งกลางทั้งสองแกนในกล่องสูงเต็ม: justify-content: center + align-items: center (เมื่อ direction เป็น row)
อยากจัด item เดียวต่างจากเพื่อน ใช้
align-self บน item นั้น — ยังไม่บังคับในแบบฝึกหลัก