CSS Flexbox 플레이그라운드
아래 컨트롤 패널에서 Flexbox 속성을 바꾸면 미리보기가 실시간으로 업데이트됩니다. 생성된 CSS 코드를 바로 복사해서 프로젝트에 적용해보세요.
🎮 실시간 플레이그라운드
flex-direction
justify-content
align-items
flex-wrap
align-content
gap
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
align-content: normal;
gap: 16px;
}
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
align-content: normal;
gap: 16px;
}
📋 Flexbox 속성 치트시트
justify-content (주축 정렬)
flex-start왼쪽 정렬
flex-end오른쪽 정렬
center가운데 정렬
space-between양끝 정렬, 균등 간격
space-around각 아이템 주변 균등
space-evenly모든 간격 완전 균등
align-items (교차축 정렬)
stretch컨테이너 높이에 맞춤
flex-start위쪽 정렬
flex-end아래쪽 정렬
center수직 가운데 정렬
baseline텍스트 기준선 정렬
flex-direction (방향)
row가로 방향 (기본값)
row-reverse가로 역방향
column세로 방향
column-reverse세로 역방향
flex-wrap (줄바꿈)
nowrap한 줄 유지 (기본값)
wrap넘치면 다음 줄로
wrap-reverse역방향으로 줄바꿈
flex 아이템 속성
flex-grow남은 공간 차지 비율
flex-shrink공간 부족 시 줄어드는 비율
flex-basis기본 크기 설정
flex: 11 1 0% 단축 표기
align-self개별 아이템 교차축 정렬
order아이템 순서 변경
자주 쓰는 패턴
완전 가운데justify+align: center
내비게이션space-between + center
카드 그리드wrap + gap
사이드바column + flex-grow:1
💡 자주 쓰는 Flexbox 패턴 코드
① 완전 가운데 정렬
.center-box {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
② 내비게이션 바 (로고 + 메뉴)
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
height: 60px;
}
③ 반응형 카드 그리드
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card-grid .card {
flex: 1 1 280px; /* 최소 280px, 남은 공간 균등 분배 */
}