Display and normal flow

Normal flow lays block boxes one after another in the block direction and inline content into line boxes. It gives the document a usable reading order before specialized layout begins.

• block starts a new block and usually fills available inline space.
• inline participates in text flow and does not accept width and height normally.
• inline-block flows inline but keeps box dimensions.
• flex and grid create layout containers for their children.
• none removes the element’s box from layout.

display has an outer role and an inner role. display: flex makes the element behave as a block externally while laying out its direct children with Flexbox internally. inline-flex changes the outer participation but keeps the same flex formatting context inside.

visibility: hidden hides a box but preserves its space. display: none creates no box and normally removes that subtree from the accessibility tree. Neither should be used when content must remain available to assistive technology but merely look visually hidden.

Start with normal flow. Add a layout mode only when the content needs it. A page built on natural source order stays more resilient and accessible when CSS fails or the viewport changes.

Disable display: flex or grid in DevTools. If the source order becomes confusing, repair the HTML rather than depending on visual rearrangement.