개발자 / CSS 레이아웃

Flexbox 플레이그라운드: 컨테이너 및 항목 CSS 제어

flex 방향, 줄바꿈, 양쪽 맞춤, 정렬 및 간격을 설정한 다음 각 항목의 grow, shrink, basis, 순서와 정렬을 조정합니다. 레이아웃 변화를 확인하고 CSS를 복사할 수 있습니다.

Flexbox 플레이그라운드: 컨테이너 및 항목 CSS 제어: 편집 가능한 항목 속성이 있는 flex 컨테이너를 실시간으로 표시하고 각 컨트롤 옆에 간단한 설명을 제공합니다. 미리보기에는 고정 높이가 적용되어 교차축 효과를 확인할 수 있습니다. 행과 열을 공유하는 Grid 레이아웃은 CSS Grid 생성기에서 사용할 수 있습니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.

카테고리
개발자 도구
실행 횟수
브라우저에서
비용
무료 · 가입 불필요
사용 가능 여부
사용 가능
Flexbox 레이아웃 도구로컬 처리

브라우저에서 전부 실행됩니다

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
}
.item-1 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-2 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-3 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-4 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-5 { flex: 0 1 120px; order: 0; align-self: auto; }

행 또는 열에는 flexbox를 사용하십시오. 행과 열 모두에서 공유 트랙이 필요하면 CSS Grid를 사용하십시오. CSS Grid 생성기 열기

선택한 항목 1

Flex 레이아웃 모델

W3C CSS Flexible Box Layout Module Level 1: https://www.w3.org/TR/css-flexbox-1/ 주축을 따라 flex 증가 및 축소 가중치를 사용해 여유 공간을 분배합니다.

정렬 및 접근성

MDN basic concepts of flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox 교차축은 주축에 수직이며, 시각적 순서를 변경해도 문서의 순서는 변경되지 않습니다.

사용 방법

  1. 컨테이너의 방향, 줄바꿈 및 정렬을 설정합니다.
  2. 항목을 클릭하고 개별 크기와 정렬을 변경합니다.
  3. 항목을 추가하거나 제거하고 레이아웃을 확인한 다음 생성된 CSS를 복사합니다.

개인정보 보호 및 제한사항

레이아웃 설정은 브라우저에서 로컬로 처리됩니다.

관련 도구

CSS gridClip pathCSS 포맷터

자주 묻는 질문

align-content가 가끔 아무런 효과가 없는 이유는 무엇인가요?

flex 라인을 분배하는 속성이기 때문입니다. 눈에 보이는 효과가 나타나려면 줄바꿈과 여러 줄이 설정되어 있고 교차축에 여유 공간이 있어야 합니다.

order가 스크린 리더의 읽기 순서도 변경하나요?

아니요. 시각적 순서만 변경하며 문서 읽기 순서와 키보드 순서는 그대로 유지됩니다. 논리적인 문서 순서를 유지하십시오.

대신 Grid를 사용해야 할 때는 언제인가요?

행과 열이 트랙을 공유해야 한다면 Grid를 사용하십시오. Flexbox는 주로 한 축을 따라 항목을 배치할 때 유용합니다.

무료 도구 · 브라우저에서회 실행 · 계정 불필요