Normal Flow as Composable Layouts
In the lesson, you will learn about Normal Flow and what patterns you can use to apply the principle of Encapsulated CSS in the context of Normal Flow.
What happens when you do nothing to style your components? It can be easy to think that there is no layout, but that would be incorrect. CSS has a default layout called Normal Flow (also called Block/Inline flow) that defines how elements interact with each other on the page. In this lesson, you will learn about Normal Flow and how it relates to composable layouts.
Normal Flow#
Normal Flow is simple. Block elements stack in the block-direction, and inline elements stack in the inline-direction. Often we define the block- and inline-directions in relation to the physical screen, block elements stacking vertically, and inline elements horizontally. However, this is not an accurate way to think about them. The correct way of describing them is in relation to the writing mode.
Block items flow in the same direction that paragraphs flow, and inline elements flow in the same direction that words in a sentence flow. In English, for example, the block-direction is top-to-bottom, and the inline-direction is left-to-right.

However, in vertical, right-to-left languages, like those in East Asia, the block-direction is right-to-left, and the inline-direction is top-to-bottom.

For this reason, the CSS working group has revisited the original CSS properties based on physical properties and has added writing mode logical variations. For example, instead of using properties like margin-top
, height
, and width
, you can now use the writing mode logical variations of margin-block-start
, block-size
, and inline-size
.
Normal Flow and Encapsulated CSS#
By default, elements in Normal Flow do not position themselves. However, in Normal Flow, margin and sizing properties like width
and height
are set explicitly on the item, which breaks the first rule of Encapsulated CSS: Items don't set their position, size, or margin.
What we have to do instead is use one of two "appropriate channels": props
and the direct child selector.
In React, we use props
as inputs to our component, much like functions use arguments. Then our components use these props
when rendering our componets.
function Button({ label, onClick }) {
return <button onClick={onClick}>{label}</button>;
}
<Button label="Get Users" onClick={fetchUsers} />;
Just like we can expose a label
or an onClick
prop, we can expose layout properties like margin-top
or min-width
:
export const Component = (props) => {
return (
<div style={{ minWidth: props.minWidth }}>
{/* Component content goes here */}
</div>
);
};
And then you call the Component like this:
This page is a preview of Composing Layouts in React