Layout concepts

4 layouts: flow, table, flexbox, grid 15 Pt2. Layout Layout concepts 1 2 3 4 1 2 3 Flow : The default layout. Deals with mostly text , not boxes . Limited support for alignments, esp. vertically. Text surround " float " elements. Cannot do much layout at all. MSWord on Web. Table : The first useful layout. Places contents into a grid . Has both horizontal and vertical alignment. Superseded by newer layouts. Still used in emails. Flexbox : The first proper layout. Deals with boxes instead of text. Flows elements vertically or horizontally. Has both horizontal and vertical alignment. Grid : The second proper layout. Like table, but more sophisticated Has both horizontal and vertical alignment. Can automatically adjust the number of columns. older newer 2 ways to bypass layout Y X Y can be either: ● an ancestor ● or the viewport. 2. offset after the layout is done 1. position X relative to Y NOTE : Bypassing layout can cause overlap , which is controlled with z-index . Flow layout: text-oriented 16 Pt2. Layout Layout concepts text flow horizontally lines stack vertically (no way to align content) Vertical text switch the direction with writing-mode Flow layout: floats float: left; float: right; Floated elements stick out of its container and intrude into other containers. The intended use case is to put text around images. It's often abused to do page layouts before flexbox. Flow layout: multi-column Commonly used in (news)papers to fill the paper space without overly long lines. Rarely used in the Web because users can scroll vertically with infinite space. Document vs. Application control alignments HEADER FOOTER MAIN S I D E create divisions application layout ( table , flexbox , grid ) Every flow feature is for formatting documents! Flexbox: create divisions 17 Pt2. Layout Layout concepts 1 2 hi 3 main axis cross axis 1 2 3 hello main axis cross axis main axis : items flow horizontally or vertically cross axis : stretch to fit the available space Division-based design with flexbox or grid HEADER FOOTER MAIN S I D E 1 3 2 2 outer flexbox (vertical) inner flexbox (horizontal) nested flexbox (result) HEADER FOOTER MAIN S I D E single grid 1 History of CSS layouts flow table flexbox grid 1990s 1990s 2015 2017 The WWW is designed to share linked documents without much layout at all. But even the simplest page has a layout more complicated than a document. Real layouts were added decades later. This is what you should learn in 2024+! The dark age of CSS: Tableless design with float-based hacks. Vertical centering was a meme. This is why you think CSS is hard.