คุณสมบัติ align-items: center ใน CSS Flexbox

align-items: center คืออะไร?

ค่า center ของ align-items จัดเรียง flex items ให้อยู่ กึ่งกลางของ Cross Axis (แกนตั้งฉากกับ Main Axis) เป็นหนึ่งในค่าที่ใช้บ่อยที่สุดสำหรับการจัดกึ่งกลางแนวตั้ง

พฤติกรรมตาม flex-direction

ตัวอย่างการใช้งาน (Row Direction)

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: #fff3e0;
      align-items: center;         /* จัดกึ่งกลางแนวตั้ง */
      height: 150px;               /* ต้องมีความสูงจำกัด */
      width: 600px;
      padding: 10px;
      gap: 10px;
    }
    .mycontainer > div {
      background-color: white;
      border: 2px solid #ff9800;
      text-align: center;
      line-height: 40px;
      font-size: 20px;
      width: 100px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>ตัวอย่าง align-items: center</h1>
  <p>Items จัดอยู่กึ่งกลางแนวตั้งของ container (ความสูง 150px)</p>
  <div class="mycontainer">
    <div>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div>Q4</div>
  </div>
</body>
</html>

การจัดกึ่งกลางทั้ง 2 แกน (Perfect Centering)

.center-both {
  display: flex;
  justify-content: center;  /* Main Axis: Horizontal center */
  align-items: center;      /* Cross Axis: Vertical center */
  height: 300px;
}

/* ใช้ได้กับ flex-direction: row (default) */
/* สำหรับ column: justify-content ควบคุมแนวตั้ง, align-items ควบคุมแนวนอน */

การใช้งานจริง: Navbar dengan Logo + Menu

.navbar {
  display: flex;
  justify-content: space-between;  /* Logo ซ้าย, Menu ขวา */
  align-items: center;             /* ทุกอย่างกึ่งกลางแนวตั้ง */
  height: 64px;
  padding: 0 24px;
  background: white;
  border-bottom: 1px solid #eee;
}

.nav-logo {
  font-size: 1.5rem;
  font-weight: 700;
}

.nav-menu {
  display: flex;
  gap: 32px;
  list-style: none;
}

.nav-link {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-link:hover {
  color: #007bff;
}

การใช้งานจริง: Button with Icon

.btn-icon {
  display: inline-flex;
  align-items: center;       /* Icon และ Text กึ่งกลางแนวตั้ง */
  justify-content: center;   /* กึ่งกลางแนวนอน (ถ้ามี width) */
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn-icon svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

การใช้งานจริง: Media Object (Avatar + Text)

.media {
  display: flex;
  align-items: center;       /* Avatar และ Text กึ่งกลางแนวตั้ง */
  gap: 16px;
  padding: 16px;
}

.media-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.media-body {
  flex: 1;
  min-width: 0;              /* ป้องกัน text overflow */
}

คำแนะนำ

• align-items: center เป็นค่าที่ใช้บ่อยที่สุดสำหรับ Vertical centering
• ร่วมกับ justify-content: center สำหรับ Perfect centering (ทั้ง 2 แกน)
• ต้องมีความสูงของ container (height/min-height) เพื่อให้เห็นผลชัดเจน (สำหรับ row direction)
• ใช้ align-self: center บน item เดียวที่ต้องการจัดกึ่งกลางแยกจากกลุ่ม
• เพิ่ม flex-shrink: 0 บน fixed-size elements (avatars, icons) ป้องกันการบีบ