CSS Flexbox Cheat Sheet

Container Properties

flex-direction

justify-content

align-items

flex-wrap

align-content (needs wrap)

gap: 16px

Click any item to configure its specific properties

CSS Output

.container {
    display: flex;
}

No Item Selected

flex-grow: 0

flex-shrink: 1

flex-basis: auto

align-self

order: 0

Copied to clipboard!