CSS Flexbox란?
CSS Flexbox(Flexible Box Layout)는 행 또는 열에서 공간을 분배하고 항목을 정렬하기 위한 1차원 레이아웃 모델입니다. flex 컨테이너는 display: flex로 정의되고, 직접 자식 요소들은 flex 항목이 됩니다. 주요 컨테이너 속성: flex-direction(행 또는 열), flex-wrap(단일 vs. 다중 줄), justify-content(주 축 정렬), align-items(줄마다 교차 축 정렬), align-content(여러 줄의 교차 축 정렬). 주요 항목 속성: flex-grow(항목이 얼마나 늘어나는지), flex-shrink(얼마나 줄어드는지), flex-basis(초기 크기), align-self(특정 항목에 대해 컨테이너의 align-items 재정의). Flexbox는 내비게이션 바, 카드 행, 중앙 정렬 레이아웃 및 모든 1차원 배열에 이상적입니다.
CSS Flexbox 생성기 사용 방법
-
드롭다운과 입력 필드를 사용하여 컨테이너 속성(flex-direction, flex-wrap, justify-content, align-items, align-content, gap)을 조정하세요.
-
미리보기에서 항목을 클릭하여 선택하세요(주황색으로 바뀝니다).
-
항목 패널에서 선택한 항목의 flex-grow, flex-shrink, flex-basis, align-self를 설정하세요.
-
'+ 항목 추가'를 클릭하여 항목을 추가하고, '제거'를 클릭하여 선택한 항목을 삭제하세요.
-
CSS와 HTML 탭을 전환하여 생성된 코드를 확인하고 복사를 클릭하세요.
-
'모두 초기화'를 클릭하면 기본 3개 항목 레이아웃으로 초기화됩니다.