Flexbox align-items

핵심 개념

align-items는 교차축(세로) 방향 정렬을 제어합니다. stretch(기본값)는 컨테이너 높이만큼 늘어나고, center는 중앙 정렬, flex-start는 상단, flex-end는 하단 정렬입니다. 부모의 height가 없으면 align-items가 효과가 없습니다. align-items와 height를 지우며 변화를 확인하십시오.

코드 분석

CSS3📋 코드 (5줄)

<div style='display:flex; align-items:center; height:120px; gap:8px; padding:8px; background:#0d1117; font-family:monospace;'>
  <div style='background:#10b981; color:white; padding:8px 16px;'>짧음</div>
  <div style='background:#cc1111; color:white; padding:20px 16px;'>중간</div>
  <div style='background:#991b1b; color:white; padding:36px 16px;'>높음</div>
</div>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 CSS 'Flexbox align-items' 코드에서
레이아웃·우선순위·반응형 버그를 찾고
수정 코드와 원인을 단계별로 설명해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'Flexbox align-items'를 사용한 실전 UI 컴포넌트를
3가지 만들어줘. 모바일 반응형까지 포함된 완성 코드로.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 CSS 'Flexbox align-items' 관련 코드 전체를 분석해서
중복 속성, 미사용 셀렉터, 성능 저하 요소를
우선순위별로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'Flexbox align-items'가 2026년에도 최선의 방법인지
최신 CSS(컨테이너 쿼리, :has, 서브그리드 등) 기능과 비교해서
솔직히 평가해줘.

⭐ 이것만 기억하세요

Flexbox align-items는 이 3가지만 확실히 잡으세요

1.높이가 다른 카드들을 가로로 나열하면 아래쪽이 들쭉날쭉해지는데, 교차축 정렬 없이는 수동으로 맞출 수 없습니다

2.align-items는 교차축 방향 정렬을 제어하며, stretch가 기본값이라 자식 높이가 부모에 맞춰 늘어납니다

3.다음 챕터에서 1차원 Flexbox를 넘어 행과 열을 동시에 다루는 CSS Grid를 배웁니다

💬 이 챕터 질문 보기

CSS3 · CH.10 — 질문하거나 답변을 확인하세요

→

진행도 10 / 34

← 커리큘럼으로 ← 목록으로 (CSS3)