나가기
🌐 웹 개발 기초›정렬의 달인 되기1/8
교차축 정렬과 간격 — Flexbox의 나머지 절반
css
1.container {2 display: flex;34 /* 교차축(cross axis) 정렬 */5 align-items: stretch; /* 늘려서 채움 (기본) */6 align-items: flex-start; /* 위쪽 정렬 */7 align-items: center; /* 세로 가운데! */8 align-items: flex-end; /* 아래쪽 정렬 */910 /* 아이템 간 간격 */11 gap: 16px; /* 행·열 동일 간격 */12 row-gap: 16px; /* 행 간격만 */13 column-gap: 8px; /* 열 간격만 */14}탭하여 계속 ▸
1 / 8