CSS Flexbox 속성을 시각적으로 조정하며 미리보기와 코드를 동시에 만듭니다.

미리보기

CSS 코드


        

    


    

        
CSS Flexbox 헬퍼 사용법

        
    
            
  1. flex-direction(가로/세로)을 선택합니다.
    2. 
            
  2. justify-content(주축 정렬)와 align-items(교차축 정렬)를 조정합니다.
    3. 
            
  3. gap과 아이템 수를 조절해 미리보기를 확인합니다.
    4. 
            
  4. CSS 코드를 복사해 사용합니다.
    5. 
        


        
주요 기능

        
    
            
  • flex-direction · flex-wrap · justify-content · align-items 모두 지원
    • 
            
  • gap 0~50px 조절
    • 
            
  • 아이템 수 1~10개
    • 
            
  • 실시간 시각적 미리보기
    • 
            
  • CSS 코드 자동 생성
    • 
        


        
활용 예시

        
    
            
  • 네비게이션 바·메뉴 정렬
    • 
            
  • 카드 그리드 (Grid보다 단순한 경우)
    • 
            
  • 버튼 그룹
    • 
            
  • 아이콘 + 텍스트 정렬
    • 
            
  • 폼 라벨·입력 정렬
    • 
        


        
주축 vs 교차축

        
flex-direction이 row면 주축 = 가로(justify-content), 교차축 = 세로(align-items)입니다. column이면 반대로 주축 = 세로, 교차축 = 가로가 됩니다. 이 개념을 이해하면 Flexbox가 훨씬 직관적입니다.


        
자주 묻는 질문

        

            

                Flexbox vs Grid, 어느 것을 써야 하나요?
                
한 방향(가로 OR 세로)이면 Flexbox, 2차원(가로+세로) 레이아웃이면 Grid를 쓰세요. 카드 그리드는 Grid가 더 강력합니다.

            

            

                flex-grow, flex-shrink는?
                
아이템별로 따로 적용하는 속성입니다. 본 도구는 컨테이너 속성에 집중되어 있으며, 개별 아이템 속성은 직접 코드에 추가하세요.

            

            

                모든 브라우저에서 지원되나요?
                
네, 2015년 이후 모든 모던 브라우저에서 완전 지원됩니다.

            

            

                gap과 margin 중 무엇이 좋나요?
                
gap이 더 좋습니다. 마지막 아이템에 불필요한 margin이 생기지 않고, wrap 시 줄 사이 간격도 일관되게 유지됩니다.