CSS Flexbox 레이아웃을 시각적으로 만듭니다
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 10px;
}flex-direction, justify-content, align-items, gap, wrap 을 클릭으로 바꾸며 실제 배치를 확인하고 CSS를 복사합니다.
가로 정렬·수직 중앙 배치·양끝 정렬처럼 자주 헷갈리는 Flexbox 속성을 눈으로 확인하고 싶을 때 씁니다.
justify-content 는 주축, align-items 는 교차축 기준입니다. flex-direction: column 이면 두 속성의 역할이 뒤바뀝니다.
그 아이템에 margin-left: auto 를 주면 됩니다. justify-content 를 바꾸지 않아도 됩니다.
Flexbox는 한 방향(행 또는 열) 정렬에, Grid는 행·열을 동시에 다루는 2차원 배치에 적합합니다.