Flexbox Cheat Sheet
CSS Flexbox properties reference guide
Flexbox Cheat Sheet
Quick reference guide for CSS Flexbox properties. Click the copy button to copy any command.
70
Total Commands
70
Filtered Results
Container Properties
| Command | Copy | Description |
|---|---|---|
display: flex | Enable flexbox layout | |
display: inline-flex | Inline flex container |
Flex Direction
| Command | Copy | Description |
|---|---|---|
flex-direction: row | Horizontal left to right (default) | |
flex-direction: row-reverse | Horizontal right to left | |
flex-direction: column | Vertical top to bottom | |
flex-direction: column-reverse | Vertical bottom to top |
Flex Wrap
| Command | Copy | Description |
|---|---|---|
flex-wrap: nowrap | Single line (default) | |
flex-wrap: wrap | Multi-line, top to bottom | |
flex-wrap: wrap-reverse | Multi-line, bottom to top |
Flex Flow (Shorthand)
| Command | Copy | Description |
|---|---|---|
flex-flow: row nowrap | Direction and wrap combined | |
flex-flow: column wrap | Column direction with wrap |
Justify Content (Main Axis)
| Command | Copy | Description |
|---|---|---|
justify-content: flex-start | Align items to start (default) | |
justify-content: flex-end | Align items to end | |
justify-content: center | Center items | |
justify-content: space-between | Space between items | |
justify-content: space-around | Space around items | |
justify-content: space-evenly | Even space between items |
Align Items (Cross Axis)
| Command | Copy | Description |
|---|---|---|
align-items: stretch | Stretch to fill container (default) | |
align-items: flex-start | Align to cross-axis start | |
align-items: flex-end | Align to cross-axis end | |
align-items: center | Center on cross-axis | |
align-items: baseline | Align to text baseline |
Align Content (Multiple Lines)
| Command | Copy | Description |
|---|---|---|
align-content: stretch | Stretch lines (default) | |
align-content: flex-start | Pack lines to start | |
align-content: flex-end | Pack lines to end | |
align-content: center | Center lines | |
align-content: space-between | Space between lines | |
align-content: space-around | Space around lines | |
align-content: space-evenly | Even space between lines |
Gap
| Command | Copy | Description |
|---|---|---|
gap: 10px | Space between items (both axes) | |
row-gap: 10px | Space between rows | |
column-gap: 10px | Space between columns | |
gap: 10px 20px | Row gap 10px, column gap 20px |
Item Properties - Order
| Command | Copy | Description |
|---|---|---|
order: 0 | Display order (default 0) | |
order: 1 | Display after order 0 | |
order: -1 | Display before order 0 |
Item Properties - Flex Grow
| Command | Copy | Description |
|---|---|---|
flex-grow: 0 | Do not grow (default) | |
flex-grow: 1 | Grow to fill space equally | |
flex-grow: 2 | Grow twice as much as flex-grow: 1 |
Item Properties - Flex Shrink
| Command | Copy | Description |
|---|---|---|
flex-shrink: 1 | Allow shrinking (default) | |
flex-shrink: 0 | Do not shrink | |
flex-shrink: 2 | Shrink twice as much |
Item Properties - Flex Basis
| Command | Copy | Description |
|---|---|---|
flex-basis: auto | Based on content size (default) | |
flex-basis: 200px | Initial size before grow/shrink | |
flex-basis: 50% | Percentage of container | |
flex-basis: 0 | Ignore content size |
Item Properties - Flex Shorthand
| Command | Copy | Description |
|---|---|---|
flex: 0 1 auto | Default (grow shrink basis) | |
flex: 1 | Shorthand for flex: 1 1 0 | |
flex: auto | Shorthand for flex: 1 1 auto | |
flex: none | Shorthand for flex: 0 0 auto | |
flex: 2 | Grow twice as much as flex: 1 |
Item Properties - Align Self
| Command | Copy | Description |
|---|---|---|
align-self: auto | Use container align-items (default) | |
align-self: flex-start | Align to cross-axis start | |
align-self: flex-end | Align to cross-axis end | |
align-self: center | Center on cross-axis | |
align-self: baseline | Align to baseline | |
align-self: stretch | Stretch to fill |
Common Patterns
| Command | Copy | Description |
|---|---|---|
display: flex;
justify-content: center;
align-items: center; | Perfect centering | |
display: flex;
justify-content: space-between; | Space items apart | |
display: flex;
flex-direction: column; | Vertical layout | |
display: flex;
flex-wrap: wrap; | Responsive wrapping | |
display: flex;
flex: 1; | Equal width items | |
display: flex;
align-items: baseline; | Align text baselines |
Advanced Patterns
| Command | Copy | Description |
|---|---|---|
margin-left: auto | Push item to the right | |
margin-right: auto | Push item to the left | |
margin: auto | Center item (with flex) |
Responsive Flexbox
| Command | Copy | Description |
|---|---|---|
@media (max-width: 768px) {
flex-direction: column;
} | Stack on mobile | |
@media (max-width: 768px) {
flex-wrap: wrap;
} | Wrap on mobile |
Browser Prefixes (Legacy)
| Command | Copy | Description |
|---|---|---|
display: -webkit-flex | Webkit prefix for old browsers | |
display: -ms-flexbox | IE 10 prefix |
All operations are performed locally in your browser. No data is sent to any server.
About Flexbox Cheat Sheet
This section will contain detailed, SEO-friendly content about the Flexbox Cheat Sheet.
In the future, this content will be managed through a headless CMS, allowing you to:
- Add detailed explanations about how to use this tool
- Include examples and use cases
- Provide tips and best practices
- Add FAQs and troubleshooting guides
- Update content without touching the code
How to Use
Step-by-step instructions for using the Flexbox Cheat Sheet will appear here. This content will be fully customizable through the admin panel.
Features
Key features and benefits of this tool will be listed here. All content is editable via the CMS.