최근 사용

    도구를 열면 여기에 표시됩니다.

    CSS Flexbox 실습 도구

    Flexbox 레이아웃을 배우고 생성하는 대화형 실습 도구입니다

    이 도구 공유

    문제 신고

    개인 입력 내용이나 파일은 포함하지 말고 문제를 설명해 주세요.

    이 도구는 얼마나 유용했나요?

    이 도구는 얼마나 유용했나요?

    레이아웃 설정

    프리셋 레이아웃

    항목별 재정의

    미리보기나 목록에서 항목을 선택하면 속성을 수정할 수 있습니다.

    Flexbox 빠른 참조

    주축

    justify-content는 주축(flex-direction으로 결정됨)을 따른 정렬을 제어합니다.

    교차축

    align-items는 교차축(flex-direction에 수직)을 따른 정렬을 제어합니다.

    여러 줄

    align-content는 flex-wrap이 wrap 또는 wrap-reverse로 설정되어 줄이 여러 개일 때만 적용됩니다.

    실시간 미리보기

    생성된 CSS

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

    설정을 바꾸거나 항목을 선택하세요. 미리보기와 CSS가 함께 갱신됩니다.

    CSS Flexbox 실습 도구 소개

    CSS Flexbox 실습 도구는 CSS Flexbox 레이아웃을 배우고 실험할 수 있는 시각적이고 대화형인 도구입니다. Flexbox(Flexible Box Layout)는 컨테이너 안의 항목을 유연하고 반응형으로 배치하도록 설계된, 가장 강력하고 널리 쓰이는 CSS 레이아웃 모듈 중 하나입니다. 이 도구에서는 모든 flex 컨테이너 및 flex 항목 속성을 실시간으로 조작하며 레이아웃이 어떻게 바뀌는지 정확히 확인할 수 있습니다.

    디자인

    새로 추가됨

    모든 도구

    개인정보 설정

    분석, 광고, 맞춤 설정에 대한 환경설정을 선택하세요. 필수 저장소는 테마와 저장한 도구 같은 기능이 계속 작동하도록 합니다.

    필수 저장소는 항상 사용됩니다.