레이아웃: flex로 가로·세로 배치

display: flex

.row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

가로 줄에 버튼·제목을 나란히 둘 때 기본입니다. gap으로 간격을 줍니다.

세로

.col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

폼 필드 스택에 유용합니다.

flex: 1

.grow { flex: 1; min-width: 0; }

남은 공간을 채울 때. min-width: 0이 없으면 긴 텍스트가 줄을 밀어내는 경우가 있습니다.

미리보기 팁

• 모바일 폭을 가정해 flex-wrap: wrap을 고려
• 카드에만 테두리/배경을 주고, 페이지 전체를 카드로 감싸지 않기
• 색은 CSS 변수로 모아 두면 바꾸기 쉽습니다

체크리스트

1. 주축이 row인가 column인가?
2. gap을 썼는가?
3. 넘치는 텍스트에 min-width: 0/overflow가 필요한가?

연습

/preview/에서 제목 + 버튼 한 줄을 flex로 만들고, 좁은 폭에서 줄바꿈되는지 확인하세요.

한 줄

> 나란히 = flex + gap. 세로 스택 = flex-direction: column.

관련 문제로 바로 이어서 연습하면 읽기가 남습니다. 태그 링크를 활용하세요.

한 줄 더: 짧게 읽고, 바로 한 문제.

정렬 한눈에

더 깊게

읽은 뒤 연습장에서 예제 코드를 한 번 타이핑해 보세요. 눈으로만 보면 하루 뒤 사라집니다.

관련 원리 카드와 문제 태그로 바로 이어서 풀면, 문법·패턴이 한 묶음으로 남습니다.

막히면 30분 규칙: 입력을 로그로 확인 → 기대/실제 한 줄 비교 → 그래도 안 되면 배우기 레슨으로 잠시 복귀.