CSS Flexbox Cheatsheet and Reference
Quick reference for all CSS flexbox properties — container and item properties with visual examples.
Published:
Tags: CSS flexbox cheatsheet, flexbox reference guide, flexbox properties list
CSS Flexbox Cheatsheet and Reference Flexbox is a one-dimensional layout system — it handles rows or columns at a time. The model has two roles: the flex container (the parent with ) and flex items (its direct children). Container properties control how items are distributed; item properties control how individual items grow, shrink, and align. This reference covers every property with values and code examples. --- What is Quick Start? What is Flex Container Properties? Sets the main axis (direction items flow): Controls whether items wrap to a new line when they overflow: (shorthand) Shorthand for + : Distributes items along the main axis: Aligns items along the cross axis (perpendicular to main axis): Distributes rows (or columns) when there is extra space on the cross axis — only…
Frequently Asked Questions
What are all flexbox container properties?
`display: flex`, `flex-direction`, `flex-wrap`, `flex-flow` (shorthand), `justify-content`, `align-items`, `align-content`, and `gap` are the primary flex container properties. `justify-content` controls main-axis alignment; `align-items` controls cross-axis alignment for all items.
What are all flexbox item properties?
Flex item properties are: `flex-grow`, `flex-shrink`, `flex-basis`, `flex` (shorthand), `order`, `align-self`, and `justify-self`. `flex-grow` controls how much an item expands; `flex-shrink` controls how much it contracts; `flex-basis` sets the initial size before growing/shrinking.
What is the shorthand for flex?
The `flex` shorthand is `flex: [grow] [shrink] [basis]`. Common values: `flex: 1` equals `flex: 1 1 0%` (item grows and shrinks equally, starting from 0 width); `flex: auto` equals `flex: 1 1 auto`; `flex: none` equals `flex: 0 0 auto` (fixed size, no grow or shrink).
What is align-self in flexbox?
`align-self` overrides the container's `align-items` value for a single flex item. It accepts the same values: `flex-start`, `flex-end`, `center`, `stretch`, and `baseline`. Use it to position one item differently from the rest — for example, pinning one item to the bottom while others are centered.
What is the flex basis?
`flex-basis` sets the initial main-axis size of a flex item before available space is distributed. `flex-basis: auto` uses the item's `width` (or `height` in column direction). `flex-basis: 0` starts all items from zero, so `flex-grow` distributes all space proportionally — this is what `flex: 1` does.
All articles · theproductguy.in