작품 수와 제목 길이가 달라도 목록은 계속 읽을 수 있어야 한다. 플렉스 배치의 줄바꿈을 사용하면 각 항목이 차지할 출발 크기를 정하고, 남은 폭에 맞춰 늘거나 줄게 할 수 있다.
flex: 1 1 15rem은 늘어남·줄어듦·기준 크기를 차례로 적은 값이다.15rem은 이 예제의 출발 크기다.flex-wrap: wrap은 다음 줄을 허용하고gap은 항목 사이 간격을 만든다.min-inline-size: 0과overflow-wrap: anywhere로 긴 제목이나 주소가 항목을 밀어내지 않게 한다. 작품의 의도적인 줄바꿈은 별도로 판단한다.- 화면에 보이는 순서를
order로 바꾸기 전에 HTML의 순서를 살핀다. 키보드 이동과 읽는 순서까지 함께 바뀌는 것은 아니다.
작은 예제
아래 코드를 UTF-8 형식의 example-04.html로 저장해 웹 브라우저에서 연다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>줄바꿈하는 작품 목록</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; font-family: sans-serif;
line-height: 1.6; color: #222; background: #fff; }
main { max-inline-size: 60rem; margin-inline: auto; }
h1 { font-size: 1.7rem; line-height: 1.3; }
a { color: #174fa0; }
:focus-visible { outline: 3px solid #174fa0; outline-offset: 3px; }
ul { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0;
list-style: none; }
li { flex: 1 1 15rem; min-inline-size: 0;
padding: 1rem; border: 1px solid; overflow-wrap: anywhere; }
</style>
</head>
<body>
<main>
<h1>줄바꿈하는 작품 목록</h1>
<ul>
<li><a href="#one">접힌 종이</a></li>
<li><a href="#two">아무도 없는 방에 놓인 길고 긴 작품 제목</a></li>
<li><a href="#three">RoomWithoutSpacesOrAnObviousPlaceToBreak</a></li>
</ul>
<section id="one"><h2>접힌 종이</h2><p>가상의 작품 설명이다.</p></section>
<section id="two"><h2>빈 방</h2><p>가상의 작품 설명이다.</p></section>
<section id="three"><h2>Room</h2><p>가상의 작품 설명이다.</p></section>
</main>
</body>
</html>넓은 화면과 좁은 화면에서 항목을 더하거나 제목을 늘려 본다. 마지막 줄의 항목도 남은 폭을 채우므로 줄마다 같은 열을 유지해야 한다면 그리드를 검토한다. 반응형 디자인은 특정 기기 이름보다 내용이 비좁아지는 조건에서 출발할 수 있다. 문서 흐름과 작품 목록의 마지막 줄을 함께 살필 수 있다.