robohash image acting as kam's profile photo

Tip 034 - Flow Layout


What will follow is a summary of the fundamentals you need to understand in order to use CSS to its fullest extent to create amazing layouts on the web. I'm not pretending to be an expert - as I've alluded to in previous posts, one of the best ways for me to learn something is to write about it, and try to teach it with clarity. Let's begin with what it means when we talk about a block element as opposed to an inline element.

Block vs Inline

Everything on the web is a box, or at least takes the shape of a box originally. If you were to strip out all the styling from a web page and look at its bare bones, it would be a series of boxes stacked on top of each other. Inside those boxes are yet more boxes, some of them stacked sideways instead. Let's use a paragraph (<p>) as an example.

  Lorem ipsum dolor sit amet, <a>consetetur sadipscing elitr</a>, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

The resulting code on the page would be boring indeed, true. These are the basics, remember. In this example, the paragraph is a block-level element. It takes up the whole of the available horizontal space on the page. If you were to add another paragraph, it would appear below the first one, because there's no more room to the side. Also, being another block element, it would want to take up all the space it can anyway.

Vertically, it's a different story. A paragraph will only take up as much room as it needs, which is almost always going to be determined by the amount of text inside that paragraph. If there weren't so much space horizontally, the paragraph would be taller because the text inside would wrap more.

Inline elements behave differently. In our example, the anchor (<a>), as well as the text around it, is considered an inline element. It does not volunteer to take all the space a block element does, as it only takes what it needs, in both directions. It may even wrap, splitting the element into multiple pieces, if the text in the link were close enough to the edge.

Inline elements will ignore any extra spacing you give it vertically. Otherwise, the rest of the line before and after it would be unaligned. However, you can add extra space horizontally, giving the element more room before and after it.

(There's another display mode you can apply to something called inline-block. This ends up being a hybrid of the two. It appears inline, alongside all the other inline and inline-block elements around. The difference is that it will actually respect the spacing you give it vertically, as a block element would.)

Flow Direction and Writing Direction

Before we get much further (tomorrow's tip anyway), I want to clarify something about block and inline elements. When describing how much space these elements use and which rules they respect, I've been talking about the space in terms of horizontal and vertical space. From now on, I'll be referring to those axes as the flow direction (the axis along which paragraphs will stack on top of each other, or block) and the writing direction (the axis along which one word comes after another, or inline).

There are situations where you may end up working with a language that does not have the same reading orientation or direction, and in these circumstances, you would set a different writing-mode in CSS. This will change the entire flow direction. By default a series of paragraphs may start at the top of the screen and go down, but another language would have those paragraphs starting on the right, sideways, and progressing to the left. In this case, for example, the flow direction is to the left and the paragraphs now take all the available space in the writing direction, which is the vertical space.

While you may not end up working with different languages like these, there are design decisions that might involve changing the writing mode for a piece of the page. By thinking in flow direction instead of rigidly thinking in vertical terms, you can save yourself some troubleshooting headaches down the line. It also helps to think of everything on the web as being relative. As opposed to print or other media, we don't have any control over how our users consume this content, so we can't design anything with a particular context in mind. We somehow have to create designs and layouts that adapt to any circumstance, and thinking about the flow axes in this way helps to bolster that mindset.

Part 2 coming next time...


Have you written a reply on another site? Put the URL here: