CSS Flexbox Visualizer
컨테이너와 아이템의 속성을 조절하여 복잡한 레이아웃을 시각적으로 설계하세요.
📦 Container Properties
1
2
3
CONTAINER CSS
.container { display: flex; flex-direction: row;
justify-content: flex-start; align-items: stretch;
flex-wrap: nowrap; gap: 10px; }
📖 사용 방법
수평/수직 중앙 정렬
justify-content: center와
align-items: center를 조합하면 부모 요소의
정중앙에 자식 요소를 배치할 수 있습니다.
GNB 스타일 (양끝 배치)
로고와 메뉴를 양 끝으로 보내려면
justify-content: space-between을 사용하세요.
반응형 카드 리스트
flex-wrap: wrap을 설정하면 화면이 좁아질 때
아이템들이 자동으로 다음 줄로 넘어갑니다.