#Flowlayout vs table layout software

In this demo, we have 3 siblings arranged using the Flexbox layout algorithm. This might seem like I'm being pedantic, but this small misunderstanding can lead to big confusion. It's more accurate to say that the z-index property is not implemented in the Flow layout algorithm, and so we'd need to pick a different layout algorithm if we want this property to have an effect. This isn't exactly wrong, but it's a subtle misunderstanding. You can't use z-index without also setting position to something like “relative” or “absolute”, because the z-index property depends on the position property. If you had asked me about this a few years ago, I would have said something like:

#Flowlayout vs table layout software

Flow is all about creating document-style layouts, and I have yet to see word-processing software that allows elements to overlap. But here's the thing: it's not implemented in Flow layout. The z-index property is used to control stacking order, to figure out which one shows up 'on top' if they overlap. Unless we explicitly opt in to another layout algorithm, Flow will be used. It's similar to the layout algorithm used in word-processing software like Microsoft Word.įlow is the default layout algorithm used for non-table HTML elements. It was created in an era when the web was primarily seen as a giant hyperlinked set of documents, like the world's largest archive. Based on the CSS provided, it will be rendered using Flow layout.įlow is the “OG” layout algorithm of the web. Our first order of business is to figure out which layout algorithm will be used to render the. And we'll use that lens to solve a surprisingly-common mystery. In this blog post, we'll look at how this new lens can help us make sense of what's happening in CSS. I realized that CSS is actually a pretty darn robust language, and I started to really enjoy writing it! Mysteries that had bothered me for years were solved. When I started digging into the layout algorithms, everything started to make more sense. Our mental model is incomplete, and it leads to surprises! This happens because the properties are acting on a complex system, and there's some subtle context that changes how the properties behave. How can the exact same CSS input produce a different output? It makes the language feel inconsistent and flaky. Have you ever had the unsettling experience of writing a familiar chunk of CSS, something you've used many times before, only to get a different and unexpected result? It's super frustrating. We need to learn how the layout algorithms work, and how they use the properties we provide to them. It's not enough to learn what specific properties do. Each algorithm is a complex system with its own rules and secret mechanisms. It's a constellation of inter-connected layout algorithms.

The key realization I had is that CSS is so much more than a collection of properties. I figured that if I understood broadly what each property did, I'd have a deep understanding of the language as a whole. Up until that moment, I had been learning CSS by focusing on the properties and values we write, things like z-index: 10 or justify-content: center. A few years ago, I had a Eureka! moment with CSS.