CSS Layout

CSS Flow Layout - CSS: Cascading Style Sheets | MDNNormal Flow, or Flow Layout, is the way that Block and Inline elements are displayed on a page before any changes are made to their layout. The flow is essentially a set of things that are all working together and know about each other in your layout. Once something is taken out of flow it works independently.https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout

Introduction to CSS layout - Learn web development | MDNThis article has provided a brief summary of all the layout technologies you should know about. Read on for more information on each individual technology!https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction

Flow

• The default layout

Normal flow describes how block & inline elements that know each other work together in a layout.

• Block elements: vertical flow -- start at the top and move down the page.
• Inline elements: horizontal flow -- starting on the left and move to the right of the page.

​

Block elements

• Laid out vertically, beginning at the top of a containing block
• The vertical distance between two sibling boxes is determined by the 'margin' properties
• Each box's left outer edge touches the left edge of the containing block

Inline elements

• Laid out horizontally, left to right of a containing block

display Property

• A property that overrides the default layout
• e.g.
• change block to inline: <display: inline>