LocalTools오프라인 브라우저 도구 모음

분류: 개발 도구

CSS 플렉스박스 생성기

자체 기획 도구찾는 도구가 없나요?

플렉스 컨테이너를 시각적으로 만들고 CSS 복사

실제 플렉스 항목으로 이루어진 미리보기에서 flex-direction, flex-wrap, justify-content, align-items, 간격을 설정하고, 완성된 컨테이너 선언을 복사하세요. 이 과정은 모두 브라우저 안에서만 이루어집니다.

출력
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.

이 도구로 할 수 있는 일

플렉스박스는 서로 영향을 주고받는 다섯 가지 속성으로 이루어져 있으며, 방향이 바뀌면 줄바꿈과 justify-content에서 말하는 "주축"의 의미 자체가 바뀌기 때문에, 머릿속으로 상상하는 것보다 직접 보는 편이 훨씬 빠릅니다. 이 도구는 번호가 매겨진 항목이 들어 있는 실제 플렉스 컨테이너를 화면에 유지하므로, 모든 옵션을 명세에 대한 머릿속 모델이 아니라 박스가 실제로 움직이는 모습으로 판단할 수 있습니다.

사용 방법

  1. flex-direction과 flex-wrap을 설정하세요.
  2. justify-content와 align-items를 선택하고 간격과 항목 수를 조정하세요.
  3. 완성된 .container 규칙을 스타일시트에 복사하세요.

개인정보

이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.

자주 묻는 질문

미리보기는 실제 플렉스 레이아웃인가요?
네. 번호가 매겨진 박스들은 이미지가 아니라 지금 설정하고 있는 정확한 CSS로 배치되므로, 화면에 보이는 그대로가 복사한 규칙이 만들어 낼 결과입니다.
왜 flex-direction을 바꾸면 justify-content의 동작도 바뀌나요?
justify-content는 항상 주축을 따라 동작하며, 주축이 가로인지 세로인지를 결정하는 것이 바로 flex-direction입니다. column으로 바꾸면 "정렬"의 기준이 좌우에서 상하로 바뀝니다.
제 레이아웃에 대한 정보가 업로드되나요?
아니요. CSS는 설정한 옵션으로부터 페이지에서 조립되는 텍스트이며, 미리보기도 로컬에서 렌더링됩니다.

전체 도구로 돌아가기