플렉스박스 실습장
Flexbox Playground
예제에서 flex 속성을 바꿔 보며 CSS와 각 속성이 무엇을 바꿨는지 확인합니다.
flexbox의 모든 속성을 살아 있는 예제 위에서 다룹니다. 조작부마다 그것이 실제로 무엇을 하는지 한 줄 설명이 붙습니다. 미리보기는 브라우저의 실제 flex 레이아웃이고 CSS는 그 상태를 그대로 옮긴 것이라, 보이는 대로 페이지에서도 그렇게 됩니다.
미리보기
항목을 누르면 그 항목의 속성을 오른쪽에서 바꿀 수 있습니다.
컨테이너
항목 1
코드
- · 주축은 가로입니다.
- · flex-grow가 모두 0이라 남는 공간은 justify-content가 나눕니다.
기본값과 같은 속성은 쓰지 않습니다. 바꾼 것만 나옵니다.
사용 방법
컨테이너 속성을 정합니다
방향, 줄바꿈, 그리고 정렬 속성 셋입니다. 각각 무엇을 바꾸는지 아래에 한 문장씩 붙어 있습니다. 특히 `align-content`는 한 줄일 때 아무 효과가 없습니다.
항목을 눌러 편집합니다
grow, shrink, basis, align-self, order는 항목 하나에 적용됩니다. 항목을 더하거나 빼면서 컨테이너가 어떻게 다시 나누는지 보세요.
설명을 읽고 CSS를 복사합니다
지금 배치가 실제로 어떻게 동작할지를 설명해 주고, 출력에서는 기본값 그대로인 속성을 모두 뺍니다. 복사되는 것은 바꾼 것뿐입니다.
자주 묻는 질문
항목이 왜 줄어들지 않고 넘치나요?
`flex-shrink: 0`이거나, 자식의 최소 콘텐츠 크기 때문입니다. flex 항목의 `min-width` 기본값이 `auto`라서 내용보다 작아지지 않습니다. 끊기지 않는 긴 문자열이나 큰 이미지가 흔한 범인이고, `min-width: 0`이 해법입니다.
`align-items`와 `align-content`는 뭐가 다른가요?
`align-items`는 항목 하나하나를 교차축에 놓습니다. `align-content`는 줄바꿈으로 줄이 여럿 생겼을 때 *줄 뭉치*를 놓습니다. 그래서 `nowrap`이거나 한 줄이면 아무 일도 하지 않습니다. "이 속성이 고장 났다"는 말이 나오는 가장 흔한 이유입니다.
순서를 바꾸는 데 `order`를 써도 되나요?
아껴 쓰세요. 시각적 순서만 바꾸고 DOM 순서는 그대로라, 화면 낭독기와 탭 순서는 여전히 마크업을 따릅니다. 시각적으로 재배치된 화면을 키보드로 탭하면 초점이 화면을 뛰어다닙니다. 규격이 최후의 수단이라고 말하는 이유입니다.
flexbox와 grid 중 무엇을 쓰나요?
한 방향이면 flexbox입니다. 버튼 한 줄, 툴바, 카드 내부 같은 것들이죠. 행과 열이 서로 맞아야 하면 grid입니다. grid를 흉내 내려고 flex 컨테이너를 중첩하고 있다면 원하는 것은 grid입니다.
이 도구로 이어지는 것
다음 단계
이 도구의 결과를 그대로 받을 수 있는 도구들입니다.
유동 크기 clamp 계산
Fluid Size Calculator
두 화면 너비 사이에서 크기가 매끄럽게 변하는 clamp() 식을 계산합니다.
CSS 정렬·압축
CSS Beautifier & Minifier
선언 순서를 바꾸지 않고 CSS를 정렬하거나 압축하며, 토큰 구성을 그대로 보존합니다.
CSS 그리드 생성
CSS Grid Builder
이름이 붙은 영역으로 그리드를 시각적으로 배치하고 grid-template CSS를 만듭니다.
색상 코드 변환
Colour Format Converter
HEX·RGB·HSL·HWB·LAB·LCH·OKLCH로 색을 변환하고 가장 가까운 색 이름을 알려 줍니다.
색상 선택기
Colour Picker
OKLCH 좌표판에서, 화면 스포이드로, 또는 업로드한 이미지에서 색을 고르고 원하는 표기법으로 복사합니다.
명도대비 검사
Contrast Checker
전경·배경 색 조합을 WCAG 2와 APCA 기준으로 채점하고 통과하는 가장 가까운 색을 제안합니다.