도구 소개
CSS Flexbox 생성기는 컨테이너에 사용할 최신 표준 Flexbox 선언을 만듭니다. 미리보기에는 번호가 있는 여러 요소가 표시되며 속성 변경이 바로 적용되어 다양한 정렬 방식을 비교하기 쉽습니다.
사용 방법
- flex-direction을 설정하여 주축 방향을 정하세요.
- justify-content와 align-items를 선택하세요.
- flex-wrap과 gap 간격을 설정하세요.
- 미리보기 항목의 위치를 확인하고 .container CSS를 복사하세요.
사용 예제
- row + center는 항목을 가로 방향 가운데에 배치합니다.
- column은 주축을 세로 방향으로 바꿉니다.
- wrap은 공간이 부족할 때 줄바꿈하고 nowrap은 한 줄을 유지합니다.
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}작동 원리 및 CSS 설명
justify-content는 주축의 배치를, align-items는 교차축의 정렬을 조절합니다. row의 주축은 일반적으로 가로 방향이며 column은 세로 방향으로 바꿉니다. flex-wrap은 공간이 부족할 때 줄바꿈할지를 결정하고, gap은 이웃한 항목이나 줄 사이에 간격을 둡니다.
주요 용도
- 내비게이션, 버튼 그룹, 카드 목록을 배치합니다.
- 주축과 교차축을 이해합니다.
- space-between, space-around, space-evenly를 비교합니다.
개인정보 안내
입력 내용과 결과는 브라우저 안에서만 처리되며 업로드되거나 자동으로 저장되지 않습니다. 보관할 결과는 복사해서 저장하세요.
FAQ
justify-content와 align-items는 어떻게 다른가요?
전자는 주축의 배치를, 후자는 교차축의 정렬을 조절합니다. 항상 가로 또는 세로라고 단정할 수는 없습니다.
flex-direction을 바꾸면 주축은 어떻게 되나요?
row는 행 방향을, column은 열 방향을 사용합니다. reverse 변형은 해당 주축의 배치 방향을 뒤집습니다.
flex-wrap은 언제 사용하나요?
항목을 한 줄에 맞추려고 압축하지 않고 컨테이너에서 여러 줄로 배치하려면 wrap을 사용하세요.
Flexbox에서 gap을 사용할 수 있나요?
네. 항목과 줄 사이의 간격을 설정합니다. 출력은 표준 gap 속성을 사용합니다.