distributing extra space
Block axis comes first
Which axis are we manipulating?
justify-*
props apply to the ‘inline’ axisalign-*
props apply to the ‘block’ axisstretch
start
| center
| end
self-*
| flex-*
safe
‘clamps’ alignment at the start-direction
and -wrap
(or -flow
)gap
on container(each item can still align-self
to override)
space
-between
| -around
| -evenly
.defaults {
flex-basis: auto; /* starting width */
flex-shrink: 1; /* distribution factor */
flex-grow: 0; /* distribution factor */
}
auto
content sizeflex
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>
Not a strict rule, just a hint!
display: grid
Container Defined Layout
gap
Generate columns
& rows
as needed
grid-<axis>-start
& grid-<axis>-end
<rows>
/ <columns>
;
min-content
, 1fr
)
fit-content(
<limit>
)
clamp(auto, max-content,
<limit>
)
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)
contain: size | layout | style | paint;
Block boxes get their
inline-size
from Context (extrinsic).
— Me, Monday
Block boxes get their
block-size
from Content (intrinsic).
— Me, Monday
inline-size
For Most Containers
size
For Scroll Containers
container-type: inline-size;
contain
: inline-size layout style;
main {
container: layout main / inline-size;
}
container-name
[/ container-type
]?@container layout (min-width: 40em) {
.conditional { /* … */ }
}
@container main (min-width: 40em) {
.conditional { /* … */ }
}
(That would introduce loops!)
(can’t change what you measure!)
No element to measure…
body > :is(header, main, footer, aside) {
container: layout / inline-size;
}
cqw
| cqh
| cqi
| cqb
| cqmin
| cqmax
@container style(--colors: invert) { … }
Unless you query a specific container-name
* for now **
** but maybe forever?
@container state(stuck) { … }
@container state(snapped) { … }
@container state(overflowing) { … }