CSS takes a source document organized as a tree of elements… and text nodes… and renders it onto a canvas such as your screen.
display
is a Shorthand
primarily inside and outside modes
display
creates
Formatting Context
display
creates
Normal Flow Behavior
inline-size
from Content
block-size
from Content
display
property
Box Generation Values
display: contents
⚠️ Potentially Severe A11y Issues
writing mode
[demo link]direction
[demo link]width
-> inline-size
height
-> block-size
top
-> block-start
bottom
-> block-end
left
-> inline-start
right
-> inline-end
margin-right
-> margin-inline-end
input {
margin-inline-end: 1em;
margin-left: 0;
}
Block axis comes first
Which axis are we manipulating?
stretch
start
| center
| end
self-*
| flex-*
block
➡️ block flow
inline
➡️ inline flow
\
grid
➡️ block grid
flex
➡️ block flex
table
➡️ block table
Create a Block Formatting Context
.defaults {
flex-basis: auto; /* starting width */
flex-shrink: 1; /* distribution factor */
flex-grow: 0; /* distribution factor */
}
flex
Shorthand Values
initial
| auto
| none
| <grow>
Initial
Shrink, If Necessary
Same as 0 1 auto
Auto
Shrink or Grow
Same as 1 1 auto
None
Don’t Flex
Same as 0 0 auto
<number>
Share Space Equally
Same as <number> 1 0
<grow>
place-
self
to
Move Individual Items
Explicit on each element
place-
items
to
Move All Items
A default from the container
place-
content
to
Move Entire Layout
space
-between
| -around
| -evenly
Not a strict rule, just a hint!
display: grid
Container Defined Layout
Generate columns
& rows
as needed
grid-<axis>-start
& grid-<axis>-end
<rows>
/ <columns>
;
<rows>
/ <columns>
;
min-content
, 1fr
)
fit-content(
<limit>
)
clamp(auto, max-content,
<limit>
)
repeat(
<count>, <tracks>
)
with matching *-start
& *-end
names
as column or row template
Content Expands & Contracts ??
Container queries will never be possible on the web. They would cause infinite layout loops.
— Browsers, a paraphrase (circa 2020)