CSS Flexbox Cheatsheet
CSS Flexbox Cheatsheet
A quick-reference guide for the CSS Flexible Box Layout (Flexbox), covering flex container (parent) configurations, flex item (child) properties, and common responsive layout patterns.
Container Properties (Parent)
The flex container is initialized by defining display: flex or display: inline-flex. This creates the flex context for all its direct children.
.container {
display: flex; /* Initialize a block-level flex container */
/* display: inline-flex; */ /* Initialize an inline-level flex container */
}
1. Flex Direction
Controls the direction of the main axis along which flex items are laid out.
.container {
flex-direction: row; /* Lay out left to right (default main axis is horizontal) */
/* flex-direction: row-reverse; */ /* Lay out right to left */
/* flex-direction: column; */ /* Lay out top to bottom (main axis is now vertical) */
/* flex-direction: column-reverse; */ /* Lay out bottom to top */
}
2. Flex Wrap
Controls whether the flex container wraps items across multiple lines if space is constrained.
.container {
flex-wrap: nowrap; /* All items fit on a single line (shrink to fit, default) */
/* flex-wrap: wrap; */ /* Wrap items onto multiple lines from top to bottom */
/* flex-wrap: wrap-reverse; */ /* Wrap items onto multiple lines from bottom to top */
}
3. Flex Flow (Shorthand)
A shorthand for setting both flex-direction and flex-wrap in a single line.
.container {
flex-flow: row wrap; /* Shorthand: [direction] [wrap] */
}
4. Justify Content
Aligns flex items along the main axis (the direction set by flex-direction).
.container {
justify-content: flex-start; /* Align items to the start of the main axis (default) */
/* justify-content: flex-end; */ /* Align items to the end of the main axis */
/* justify-content: center; */ /* Align items in the center of the main axis */
/* justify-content: space-between; */ /* Equal spacing between items; first/last touch borders */
/* justify-content: space-around; */ /* Equal spacing around items; half-size space on ends */
/* justify-content: space-evenly; */ /* Equal spacing around items and on both ends */
}
5. Align Items
Aligns flex items along the cross axis (perpendicular to the main axis).
.container {
align-items: stretch; /* Stretch items to fill the container height/width (default) */
/* align-items: flex-start; */ /* Align items to the start of the cross axis */
/* align-items: flex-end; */ /* Align items to the end of the cross axis */
/* align-items: center; */ /* Align items in the center of the cross axis */
/* align-items: baseline; */ /* Align items along their text baselines */
}
6. Align Content
Aligns a multi-line flex container’s lines along the cross axis when there is extra space (has no effect on single-line flex containers!).
.container {
align-content: stretch; /* Stretch lines to fill remaining space (default) */
/* align-content: flex-start; */ /* Pack lines to the start of the cross axis */
/* align-content: flex-end; */ /* Pack lines to the end of the cross axis */
/* align-content: center; */ /* Pack lines in the center of the cross axis */
/* align-content: space-between; */ /* Equal spacing between lines */
/* align-content: space-around; */ /* Equal spacing around lines; half-space on ends */
}
7. Gaps (Spacing)
Specifies the explicit minimum spacing between flex items (does not add spacing on container borders).
.container {
gap: 1rem; /* Spacing of 1rem between both rows and columns */
/* row-gap: 1rem; */ /* Spacing of 1rem between rows only */
/* column-gap: 1.5rem; */ /* Spacing of 1.5rem between columns only */
}
Item Properties (Children)
These properties apply directly to the child elements inside a flex container.
.item {
/* Child properties go here */
}
1. Order
Overrides the default source order of HTML markup to position items.
.item {
order: 1; /* Default is 0. Lower numbers appear first, higher numbers last (supports negative values) */
}
2. Flex Grow
Defines the ability of a flex item to grow and claim remaining free space inside the container.
.item {
flex-grow: 1; /* Default is 0 (does not grow). If set to 1, item grows to claim available space. If all items are 1, they split space equally */
}
3. Flex Shrink
Defines the ability of a flex item to shrink when container space is constrained.
.item {
flex-shrink: 1; /* Default is 1 (shrinks to fit). If set to 0, item is locked and will NOT shrink below its size basis */
}
4. Flex Basis
Defines the default size of an item before remaining space is distributed.
.item {
flex-basis: 250px; /* Sets default starting size. Can be px, em, rem, %, or auto (default) */
}
5. Flex (Shorthand)
The recommended shorthand for setting flex-grow, flex-shrink, and flex-basis in a single line.
.item {
flex: 0 1 auto; /* Shorthand: [grow] [shrink] [basis] (default) */
/* flex: 1; */ /* Shorthand for: 1 1 0% (grows and shrinks, splits space equally) */
/* flex: none; */ /* Shorthand for: 0 0 auto (does not grow or shrink, locked size) */
}
6. Align Self
Allows an individual flex item to override the container’s align-items alignment setting.
.item {
align-self: center; /* Overrides parent's align-items. Can be: auto, stretch, flex-start, flex-end, center, baseline */
}
Common Layout Patterns
1. Absolute Centering (Perfect Center)
The classic, simplest way to perfectly center any content horizontally and vertically.
.parent-center {
display: flex;
justify-content: center;
align-items: center;
}
2. Responsive Card Grid
An extremely robust responsive layout that flows items and wraps them naturally across screen size shifts.
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.card-item {
flex: 1 1 300px; /* Grow and shrink, with a minimum starting size of 300px before wrapping */
}
3. Sticky Footer Layout
Ensure the footer sticks to the bottom of the screen when page content is short, but pushes down naturally when content is long.
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content-body {
flex: 1 0 auto; /* Grow to fill all remaining vertical space, pushing footer down */
}
.footer {
flex-shrink: 0; /* Lock footer so it never shrinks */
}