도구 소개
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를 비교합니다.
개인정보 안내
모든 입력 처리, 계산, CSS 생성, 미리보기는 현재 브라우저에서 이루어집니다. 사용자 내용을 업로드하지 않으며 백엔드, 데이터베이스, 온라인 API, 외부 CDN을 사용하지 않습니다. 입력값은 자동 저장되지 않습니다.
FAQ
justify-content와 align-items는 어떻게 다른가요?
전자는 주축의 배치를, 후자는 교차축의 정렬을 조절합니다. 항상 가로 또는 세로라고 단정할 수는 없습니다.
flex-direction을 바꾸면 주축은 어떻게 되나요?
row는 행 방향을, column은 열 방향을 사용합니다. reverse 변형은 해당 주축의 배치 방향을 뒤집습니다.
flex-wrap은 언제 사용하나요?
항목을 한 줄에 맞추려고 압축하지 않고 컨테이너에서 여러 줄로 배치하려면 wrap을 사용하세요.
Flexbox에서 gap을 사용할 수 있나요?
네. 항목과 줄 사이의 간격을 설정합니다. 출력은 표준 gap 속성을 사용합니다.