flexbox
CSS alignment method
Flexbox is a CSS layout system for arranging elements in rows or columns.
Short for "flexible box," it handles spacing, alignment, and distribution of items within a container, even when their sizes are unknown: I used flexbox to center the navigation links.
Flexbox simplified layouts that previously required floats or positioning hacks.
Presentation for viewing
Middle of anything
- stretchPull to extend
- baselineStandard for comparison
- centeringPositioning at midpoint
- distributionAllocation across recipients
Linear arrangement across
- columnVertical structural element
- wrapEnclose by winding around
- one-dimensionalWithout depth or complexity
- horizontalParallel to the horizon
vertical · direction · reordering · nested · navbar · sidebar
Substance that flows
- adaptiveAble to change accordingly
- scalableAble to increase capacity
- mobile-firstPrioritizing portable device design
- viewportVisible display region
breakpoints · elastic · dynamic · reflow · stacking · collapsible
Self, in compounds
- contentWhat something contains
- intrinsicBelonging by nature
- proportionalScaled to match another
- shrinkableAble to reduce in size
display
Presentation for viewing
center
Middle of anything
row
Linear arrangement across
- columnVertical structural element
- wrapEnclose by winding around
- one-dimensionalWithout depth or complexity
horizontal · vertical · direction · reordering · nested · navbar · sidebar
fluid
Substance that flows
- adaptiveAble to change accordingly
- scalableAble to increase capacity
- mobile-firstPrioritizing portable device design
viewport · breakpoints · elastic · dynamic · reflow · stacking · collapsible
auto
Self, in compounds
- contentWhat something contains
- intrinsicBelonging by nature
- proportionalScaled to match another