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 นั้น — ยังไม่บังคับในแบบฝึกหลัก