문서 흐름은 웹 브라우저가 요소들을 문서의 순서와 배치 규칙에 따라 놓는 방식이다. 기본적인 가로쓰기 문서에서 제목과 문단 같은 블록 요소는 앞뒤 요소와 자리를 나누며 아래로 이어진다. 링크와 강조처럼 글줄 안에 놓이는 인라인 요소는 문장을 따라 배치된다. CSS로 복잡한 위치를 지정하지 않아도 글을 읽을 수 있는 까닭은 이런 기본 배치가 있기 때문이다. 화면에서 위치를 바꾸기 전에 HTML 문서의 순서 자체가 자연스러운지 살필 필요가 있다. 새로운 질서는 레이아웃이 내용 구조의 문제를 잠시 가리고 있지는 않은지 묻는다.
나란히 놓을 필요가 있는 항목이 생기면 그 무리에 맞는 배치 규칙을 적용할 수 있다. 짧은 이동 링크들을 한 방향으로 놓을 때는 플렉스 배치를 사용하고 두 방향의 격자가 필요하면 그리드를 살펴볼 수 있다. 문단까지 모두 별도의 배치 장치로 감쌀 필요는 없다. 절대 위치를 지정한 요소는 일반 흐름에서 빠지므로 내용이 늘어났을 때 다른 요소와 겹칠 수 있다. CSS를 잠시 비활성화해 읽는 순서를 살핀 뒤 필요한 무리의 배치만 바꾸면 억지로 좌표를 맞추는 일을 줄일 수 있다. 좋은 흐름은 내용과 화면의 변화에도 요소들이 자리를 조정할 수 있게 하며 반응형 디자인의 바탕이 된다.