CSS layout has grown and evolved into a robust set of tools to accomplish some fantastic modern layouts.
The problem is that we are still teaching CSS as something that is" hacked" together by using" tricks" to get our desired web layouts.
Learning CSS like this typically leads us down one of two paths: We either build fragile page layouts using 
the "see what sticks" method of CSS, or we give up and declare that CSS is too tricky and bring in an X column grid system like Twitter Bootstrap.

Creating page layouts in CSS doesn't have to be complicated. Like how you make much of your everyday speech using just a small 
subset of vocabulary composed together, you can achieve sophisticated layouts by composing simple low-level layout primitives in unique ways.

In this course, you will learn foundational layout primitives that you can use to build many of your more complex layouts. You will also learn 
how to apply the principle of "Encapsulated CSS" to both extend these primitives as well as to create custom layout primitives. To do this, we 
will recreate many of the layouts found in the wild using the principles mentioned above.

This course does not require extensive knowledge of CSS. It does assume that you have a basic understanding of the CSS box model, CSS specificity, 
CSS selectors, and CSS sizing units. Though you can apply the principles in this course to any modern web framework, including no framework 
development, this course will be using React and assume you have a basic understanding of React, JSX, and React hooks.

Composing Layout in React is for both novice and experienced developers who want to take their layout skills to the next level. This course will 
teach you the practical skills you need to build modern layouts for the web without depending on heavy CSS frameworks. Unlike courses and blog 
posts that teach each layout property in isolation, our product teaches practical layout patterns that you can use every day when solving your 
layout challenges.

In this course we show you how to build complex layouts in React by composing just a few foundational layout primitives.
Along the way you will learn modern CSS Layout tools like Normal Flow, Flexbox, and Grid.

Composing Layouts in React

---
title: Normal Document Flow in HTML, CSS, and React
slug: composable-normal-flow
description: 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.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/f659m8z5ne
useMdx: true
---

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.

![The box model](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_02/lesson_02.03/public/assets/Horizontal-ltr.png)

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.

![The box model](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_02/lesson_02.03/public/assets/Vertical-rtl.png)

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.

```jsx
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`:

```jsx { actualFilename=./protected/props-example.jsx endLine=9 startLine=3 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_02/lesson_02.03/protected/props-example.jsx#L3 }
export const Component = (props) => {
  return (
    <div style={{ minWidth: props.minWidth }}>
      {/* Component content goes here */}
    </div>
  );
};
```

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.