CSS Flexbox Cheatsheet - Flexbox Layout Reference
All essential CSS Flexbox commands organized by use case, with 44+ entries you can copy and run directly. Find the right command fast when you need it.
Back to Web ServicesContainer Properties 8
display: flexEnable flex layout (block-level)
display: inline-flexEnable flex layout (inline-level)
flex-direction: rowMain axis = row, horizontal (default)
flex-direction: columnMain axis = column, vertical
flex-direction: row-reverseRow, reversed order
flex-direction: column-reverseColumn, reversed order
flex-wrap: wrapAllow wrap (default nowrap)
flex-flow: row wrapShorthand for direction + wrap
Gap & Main-axis Alignment 8
gap: 16pxGap between items (row & column)
row-gap: 16pxRow gap only
column-gap: 16pxColumn gap only
justify-content: flex-startStart of main axis (default)
justify-content: centerCenter on main axis
justify-content: flex-endEnd of main axis
justify-content: space-betweenSpace between, ends flush
justify-content: space-aroundEqual space around each item
Cross-axis Alignment 7
justify-content: space-evenlyAll gaps exactly equal
align-items: stretchStretch to fill cross axis (default)
align-items: flex-startStart of cross axis
align-items: centerCenter on cross axis
align-items: flex-endEnd of cross axis
align-items: baselineAlign on baseline
align-content: centerCross-axis alignment of wrapped lines
Item Properties 10
flex-grow: 1Grow factor, 0 = no grow (default)
flex-shrink: 1Shrink factor, 0 = no shrink (default 1)
flex-basis: 200pxInitial size (default auto)
flex: 1Shorthand: 1 1 0%, share free space
flex: 0 0 200pxShorthand: no grow/shrink, fixed 200px
flex: autoShorthand: 1 1 auto
flex: noneShorthand: 0 0 auto, no grow/shrink
align-self: flex-endOverride align-items for one item
order: 1Display order, default 0, can be negative
order: -1Move to the front
Common Patterns 6
justify-content: center; align-items: centerHorizontal & vertical center
justify-content: space-betweenSpace-between (navbar left/right)
flex: 1Share remaining space
margin-left: autoPush item to end of main axis
min-height: 100vhSticky footer with column (child flex:1)
flex: 1 0 autoFixed base, no shrink (sidebar)
Responsive Tips 5
flex-wrap: wrapAuto wrap when window narrows
flex-basis: 200px; flex-grow: 1Responsive card grid
flex-wrap: wrap-reverseReverse wrap layout
@media (max-width: 768px) { flex-direction: column }Switch to column on mobile
flex: 1 1 100%Fill full row, force wrap
💡 Tips
- flex: 1 是 flex: 1 1 0% 的简写，表示等分剩余空间。
- align-items 是交叉轴对齐，flex-direction: column 时交叉轴变为水平方向。
- gap 属性替代了旧的 margin 技巧，更简洁地设置项目间距。
- flex-wrap: wrap 配合 flex-basis 可以实现响应式网格布局。
- flex 简写优先使用，单独设置 flex-grow/shrink/basis 容易覆盖预期行为。
Official References
Commands are compiled from the official docs below. Click to verify the latest usage.
Maintained by LaoHand
Publicly updated on Jul 21, 2026, continuously proofread against official docs.
Found an error? Report it
Wrong command or description? Open an issue to help us fix it.
Found an error? Report it