CSS Layout Playground

값을 바꾸면 미리보기와 HTML / CSS 코드가 바로 바뀝니다.

자주 쓰는 레이아웃으로 시작하기

누르면 값이 한 번에 바뀌고, 이어서 직접 고쳐볼 수 있습니다.

아직 불러온 레이아웃이 없습니다. 기본 상태에서 시작합니다.

미리보기

보기

화면 너비

768px

이 폭에 적용되는 구간: @media 768px 이상

박스를 클릭하면 그 박스만 따로 바꿀 수 있습니다. (태그, 남는 공간 차지, 차지할 칸 수 등)

박스 개수5

편집할 화면 구간 @media

모든 화면 폭에 적용되는 기본값입니다.

방향

배치 방향flex-direction

왼쪽 → 오른쪽으로 가로 배치합니다.

줄바꿈flex-wrap

한 줄에 모두 놓습니다. 자리가 모자라면 박스가 줄어들거나 넘칩니다.

정렬

주축 정렬→ 가로justify-content

주축의 시작 쪽으로 모읍니다.

교차축 정렬↓ 세로align-items

교차축 방향으로 늘려서 꽉 채웁니다. (크기를 정하지 않은 박스만)

간격

박스 사이 간격gap12px박스와 박스 사이만 벌어집니다. 바깥 여백은 생기지 않습니다.

더 알아보기 · 콘텐츠 넘침 방지 .item꺼짐

내용보다 작게 줄어들기min-width: 0flex / grid 박스는 기본으로 안의 가장 긴 단어보다 작아지지 않습니다.긴 단어도 줄바꿈overflow-wrap: anywhere띄어쓰기 없는 긴 링크나 단어를 칸 안에서 끊어 줍니다.

참고모든 요소가 <div> 입니다. 헤더, 메뉴, 목록처럼 역할이 있는 영역이면 그에 맞는 태그를 써보세요.

결과 코드

미리보기와 똑같이 나오는 코드입니다. 복사해서 바로 쓸 수 있습니다.

HTML

1<div class="container">2  <div class="item">1</div>3  <div class="item">2</div>4  <div class="item">3</div>5  <div class="item">4</div>6  <div class="item">5</div>7</div>

CSS

1.container {2  display: flex;3  flex-direction: row;4  flex-wrap: nowrap;5  justify-content: flex-start;6  align-items: stretch;7  gap: 12px;8}

아직 @media 가 없습니다. 미리보기의 태블릿 / 데스크톱 버튼(또는 레이아웃 탭의 '편집할 화면 구간')을 누른 뒤 값을 바꾸면 그 구간의 @media 블록이 여기에 추가됩니다.