유동형 레이아웃은 가용 공간에 따라 요소의 너비 등이 달라지는 배치다. 반응형 디자인에서 화면 변화에 대응하는 방법 중 하나이며, 특정 너비에서 규칙을 전환하는 브레이크포인트와 함께 사용할 수도 있다.
- 고정 너비
600px인 목록은 놓일 공간이 줄어도 그 값이 그대로다.width: 90%인 목록은 일반적으로 자신을 담은 블록의 너비를 기준으로 변한다. 창 전체의 90%라는 뜻으로 외우면 좁은 칸 안에서 예상과 달라질 수 있다. width: 90%; max-width: 60rem처럼 최대 너비를 함께 정할 수 있다. 넓은 화면에서 계속 늘어나는 글줄을 제한하면서 좁은 공간에서는 줄어들게 하는 조합이다.- 글은 폭에 따라 줄 수가 달라지고, 이미지는 종횡비에 따라 높이가 달라진다. 같은 비율로 너비를 늘려도 둘의 아래쪽 끝이 함께 움직이지는 않는다.
- 줄바꿈하는 작품 목록에서는 항목을 다음 줄로 보낼 수 있다. 좁은 칸에 들어간 긴 낱말처럼 쉽게 끊어지지 않는 내용도 배치의 조건이다.