display types

The `display` property has many functions 19 Pt2. Layout `display` types ● outside : is it inline or block? (only relevant in the flow layout) ● inside : 1 of the 4 layouts for its content (flow, table, flexbox, grid) ● Predefined value => inside + outside display: block inline-block inline-table inline-grid flow-root grid inline outside inside inline inline inline inline block block block flow-root grid table flow grid flow-root flow block flex flex NOTE : You can use inside and outside directly instead of predefined values. E.g.: display: inline flow-root Changing layouts Flow is the default layout , its inside value is flow-root flow-root controls all descendants . ● Descendants: can specify the outside value as inline|block . ● Descendants: the inside value is flow by default; it has no effect. ● Descendants: interact with each other (float, margin-collapse). flex|grid controls children . ● Children: the outside value doesn't apply. ● Children: the inside value fallbacks to flow-root unless changed. ● Children: each is an isolated box. <html> <body> <h1>A title</h1> <div style="display: flex;"> <div>Item 1</div> <span>Item 2</span> <p>Item 3</p> <p>Item 4</p> </div> </body> </html> inside: flow-root inside: flow (no effect) the same layout from <html> inside: flex inside: flow-root fallback to the default inline | block has no effect on flex items There are 6 boxes with a layout in this example. flow vs. flow-root : Some flow layout features cause layout interactions (float, margin) . These interactions do not cross layout boundaries ( flow-root , table , flex , grid ). `display: none` 20 Pt2. Layout `display` types Hide content as if it doesn't exists. Layout as normal, but don't show. NOTE : This is inheritable. Unhide descendants with `visible` value. `display: contents` Replace the container with its children as if the container doesn't exist. <header>HEADER</header> <div class="nested"> <nav>Sidebar...</nav> <main>Article...</main> </div> <footer>FOOTER</footer> <header>HEADER</header> <nav>Sidebar...</nav> <main>Article...</main> <footer>FOOTER</footer> 1 3 2 2 nested divs flattened nodes in a grid 1 .nested { display: contents ; } WHY : HTML designed as nested flexboxes cannot be used as a single grid. Remove div wrappers with display: contents without changing HTML. `display: table` /* browser's built-in CSS */ table { display: table; } tr { display: table-row ; } th, td { display: table-cell ; } <table> <tr><td>1</td><td>2</td></tr> <tr><td>3</td> <td>4</td></tr> </table> flex grid A B C A C A B C A C `visibility: hidden` Summary CSS determines what's a table, row, or cell. You can make anything behave like tables. ● Ouside: inline , block ● Inside: flow-root , table , flex , grid ● Special: table-* , list-item ● Hide stuff: none , contents