작품 수와 제목 길이가 달라도 목록은 계속 읽을 수 있어야 한다. 플렉스 배치의 줄바꿈을 사용하면 각 항목이 차지할 출발 크기를 정하고, 남은 폭에 맞춰 늘거나 줄게 할 수 있다.
- `flex: 1 1 15rem`은 늘어남·줄어듦·기준 크기를 차례로 적은 값이다. `15rem`은 이 예제의 출발 크기다.
- `flex-wrap: wrap`은 다음 줄을 허용하고 `gap`은 항목 사이 간격을 만든다.
- `min-inline-size: 0`과 `overflow-wrap: anywhere`로 긴 제목이나 주소가 항목을 밀어내지 않게 한다. 작품의 의도적인 줄바꿈은 별도로 판단한다.
- 화면에 보이는 순서를 `order`로 바꾸기 전에 HTML의 순서를 살핀다. 키보드 이동과 읽는 순서까지 함께 바뀌는 것은 아니다.
## 작은 예제
아래 코드를 UTF-8 형식의 `example-04.html`로 저장해 웹 브라우저에서 연다.
```html
줄바꿈하는 작품 목록
줄바꿈하는 작품 목록
```
넓은 화면과 좁은 화면에서 항목을 더하거나 제목을 늘려 본다. 마지막 줄의 항목도 남은 폭을 채우므로 줄마다 같은 열을 유지해야 한다면 그리드를 검토한다. [[반응형 디자인]]은 특정 기기 이름보다 내용이 비좁아지는 조건에서 출발할 수 있다. [[문서 흐름]]과 [[작품 목록의 마지막 줄]]을 함께 살필 수 있다.
## 참고
- [Interneting Is Hard: 플렉스박스](https://internetingishard.netlify.app/html-and-css/flexbox/)
- [MDN: flex](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex)
#HTML #CSS #웹제작