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: