Flexbox 생성기
시각적 컨트롤러로 flex 컨테이너와 아이템을 구성하고, 실시간으로 반응하는 레이아웃을 확인한 뒤 클릭 한 번으로 CSS를 복사해 보세요.
레이아웃은 브라우저에서 직접 빌드됩니다. 설정한 어떤 데이터도 BroBroGo 서버로 전송되지 않습니다.
자주 묻는 질문
justify-content와 align-items의 차이는 무엇인가요?
justify-content는 주축(main axis, 행 또는 열이 흐르는 방향)을 따라 아이템을 배치하고, align-items는 교차축(cross axis, 주축과 수직인 방향)을 따라 배치합니다. 방향을 row에서 column으로 바꾸면 두 축이 서로 교차하므로, justify-content는 위아래 방향으로 작동하고 align-items는 좌우 방향으로 작동하게 됩니다.
개별 아이템 제어는 어떻게 작동하나요?
번호로 아이템을 선택한 뒤, 남는 공간을 채우기 위해 늘어나는 비율(grow), 공간이 부족할 때 줄어드는 비율(shrink), 시작 크기(basis), 그리고 개별 교차축 정렬(align-self)을 설정해 보세요. order 속성을 사용하면 HTML 구조를 건드리지 않고 화면에 표시되는 순서만 앞뒤로 바꿀 수 있습니다. 실제로 변경한 아이템에 대해서만 CSS 규칙이 생성됩니다.
wrap과 align-content는 언제 중요해지나요?
줄바꿈(wrap)을 끄면 모든 아이템이 한 줄에 강제로 배치되어 너비가 좁게 찌그러질 수 있습니다. 줄바꿈을 켜면 공간이 부족한 아이템들이 다음 줄로 넘어가며, 이때 align-content가 작동하여 여러 줄 전체의 간격을 조절하게 됩니다. Gap은 마진(margin) 없이도 아이템 사이 및 줄 사이의 간격을 깔끔하게 설정해 줍니다.