Understanding Flow Layout in CSS ​

In the realm of web design, CSS acts more like a versatile toolkit than a single uniform language. At its core lies a fundamental concept: the layout mode.

There are 7 layout modes in CSS and the default mode is the flow layout.

The flow layout dance ​

Imagine CSS as a conductor orchestrating a symphony of elements on a webpage. Each HTML component, whether it's a header, paragraph, or link, dances to the rhythm of the flow layout. It's the default choreography, guiding the arrangement of content across the digital stage.

The flow layout is the default layout mode in CSS. It arranges elements in the order they appear in the HTML document, from top to bottom and left to right.

A plain HTML document, with no CSS applied, uses flow layout exclusively.

Block and inline elements ​

We can categorize HTML elements into two primary types: block and inline elements.

Block elements ​

Block elements are the building blocks of the flow layout. They stack on top of each other, creating a vertical flow. Examples of block elements include: <div>, <p>, <h1> and <section>.

Inline elements ​

Inline elements flow within the text content. They don't create line breaks and align horizontally. Examples of inline elements include: <span>, <a>, <strong> and <em>.

Controlling the flow ​

However, we can manipulate the flow layout by changing the display property of an element.

/* Transform an inline element into a block element */
a.nav-link {
  display: block;
}

/* Transform an inline element into a block element */
a.nav-link {
  display: block;
}

There is an hybrid property as well, the inline-block value, which combines the characteristics of both block and inline elements. It flows horizontally like an inline element but allows for height and width properties like a block element.

/* Transform an inline element into an inline-block element */
span.icon {
  display: inline-block;
}

/* Transform an inline element into an inline-block element */
span.icon {
  display: inline-block;
}

Conclusion ​

The flow layout is the backbone of CSS. It's the foundation upon which we build the visual structure of a webpage. Understanding how elements flow and interact with each other is essential to understanding the language of the web.

Written by