⚡ Interactive Flexbox Demo
Adjust properties to see live results. Copy the generated CSS.
flex-direction
justify-content
align-items
flex-wrap
gap
1
2
3
4
5
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 12px;
}
No properties match your search.
📦 Box Model & Sizing
14▾
| box-sizing: border-box | Width/height include padding & border (recommended globally) | |
| width: 100% | Full width of parent. Also: max-width, min-width | |
| height: 100vh | Full viewport height. Also: 100%, fit-content, min-content | |
| margin: 0 auto | Center block horizontally (needs a width) | |
| margin: 8px 16px | Shorthand: top/bottom 8px, left/right 16px | |
| padding: 16px 24px | Inner spacing: top/bottom 16px, left/right 24px | |
| border: 1px solid #ccc | Shorthand: width style color | |
| border-radius: 8px | Round corners. 50% = circle | |
| outline: 2px solid blue | Like border but doesn't affect layout (used for focus) | |
| overflow: hidden | Clip overflow. Also: scroll, auto, visible | |
| overflow-x: auto | Horizontal scroll when needed | |
| display: block | Block-level (full width). Also: inline, inline-block, none | |
| visibility: hidden | Hidden but still takes up space (vs display: none) | |
| aspect-ratio: 16/9 | Maintain ratio when one dimension is auto |
⚡ Flexbox — Container
9▾
| display: flex | Enable flexbox on container | |
| flex-direction: row | Main axis direction: row | row-reverse | column | column-reverse | |
| justify-content: center | Align along main axis: flex-start | center | flex-end | space-between | space-around | space-evenly | |
| align-items: center | Align along cross axis: stretch | flex-start | center | flex-end | baseline | |
| align-content: center | Align wrapped lines (only when flex-wrap is set) | |
| flex-wrap: wrap | Allow items to wrap: nowrap | wrap | wrap-reverse | |
| gap: 16px | Space between flex items (also: row-gap, column-gap) | |
| flex-flow: row wrap | Shorthand for flex-direction + flex-wrap | |
| display: inline-flex | Flex container, but inline (wraps around content) |
⚡ Flexbox — Items
8▾
| flex: 1 | Grow and shrink equally. Shorthand for flex-grow flex-shrink flex-basis | |
| flex: 0 0 200px | Fixed 200px, won't grow or shrink | |
| flex-grow: 1 | How much to grow relative to siblings (0 = no grow) | |
| flex-shrink: 0 | Prevent item from shrinking (1 = default, can shrink) | |
| flex-basis: auto | Initial size before growing/shrinking. Also: 200px, 50% | |
| align-self: flex-start | Override align-items for specific item | |
| order: -1 | Change visual order (default 0; lower numbers first) | |
| margin-left: auto | Push item to far right (auto margin absorbs free space) |
🔲 CSS Grid — Container
10▾
| display: grid | Enable grid on container | |
| grid-template-columns: repeat(3, 1fr) | 3 equal columns. Also: 1fr 2fr 1fr, 200px 1fr | |
| grid-template-rows: 100px auto | Fixed first row, auto-sized second | |
| grid-template-areas: "h h" "s m" "f f" | Named layout areas (reference with grid-area on items) | |
| gap: 16px | Gutter between rows and columns | |
| column-gap: 24px | Gutter between columns only (also: row-gap) | |
| auto-fill vs auto-fit | auto-fill: empty tracks stay; auto-fit: empty tracks collapse | |
| repeat(auto-fill, minmax(200px, 1fr)) | Responsive grid: fill with minimum 200px columns | |
| justify-items: center | Align items horizontally within cells: start | center | end | stretch | |
| align-items: center | Align items vertically within cells |
🔲 CSS Grid — Items
7▾
| grid-column: 1 / 3 | Span from column line 1 to 3 (spans 2 columns) | |
| grid-column: span 2 | Span 2 columns from wherever the item is placed | |
| grid-row: 1 / 3 | Span from row line 1 to 3 | |
| grid-area: header | Place item in a named area (requires grid-template-areas) | |
| grid-area: 1 / 1 / 2 / 3 | Shorthand: row-start / col-start / row-end / col-end | |
| justify-self: center | Align one item horizontally within its cell | |
| align-self: end | Align one item vertically within its cell |
🔤 Typography
16▾
| font-family: 'Inter', sans-serif | Font stack (always include fallback) | |
| font-size: 16px | Also: 1rem, 1.2em, clamp(14px, 2vw, 18px) | |
| font-weight: 600 | 100–900 or: normal (400), bold (700) | |
| font-style: italic | Also: normal, oblique | |
| line-height: 1.5 | Unitless is preferred (multiplies font-size) | |
| letter-spacing: 0.05em | Tracking between characters | |
| text-align: center | Also: left, right, justify, start, end | |
| text-decoration: underline | Also: none, line-through, overline | |
| text-transform: uppercase | Also: lowercase, capitalize, none | |
| text-overflow: ellipsis | Truncate overflow text with "…" (needs overflow: hidden) | |
| white-space: nowrap | Prevent wrapping. Also: pre, pre-wrap, normal | |
| word-break: break-all | Break long words. Also: break-word, normal | |
| font-variant: small-caps | Small caps variant | |
| -webkit-line-clamp: 3 | Limit text to N lines with ellipsis (needs -webkit-box) | |
| clamp(14px, 2.5vw, 20px) | Fluid font: min 14px, preferred 2.5vw, max 20px | |
| font: italic 600 16px/1.5 sans-serif | Shorthand: style weight size/line-height family |
🎨 Colors & Backgrounds
14▾
| color: #3b82f6 | Text color (hex, rgb, hsl, oklch) | |
| color: rgb(59 130 246) | Modern space-separated RGB (no commas) | |
| color: hsl(217 91% 60%) | Hue (0–360) Saturation% Lightness% | |
| color: oklch(0.62 0.2 250) | Perceptual color space (modern, P3 gamut) | |
| opacity: 0.5 | Affects element and all children (0=transparent, 1=opaque) | |
| background-color: #fff | Solid background | |
| background-image: url('bg.png') | Image background | |
| background-size: cover | Scale to cover. Also: contain, 100% auto | |
| background-position: center | Position of background image | |
| background-repeat: no-repeat | Also: repeat, repeat-x, repeat-y | |
| background: linear-gradient(135deg, #667eea, #764ba2) | Gradient background | |
| background: radial-gradient(circle, #3b82f6, #0f172a) | Radial gradient | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1) | Shadow: x y blur spread color. Inset prefix for inner shadow | |
| filter: blur(4px) brightness(0.8) | CSS filters: blur, brightness, contrast, grayscale, invert |
📍 Positioning & Z-index
10▾
| position: relative | Moves relative to itself. Creates positioning context for children | |
| position: absolute | Removed from flow. Positioned to nearest non-static ancestor | |
| position: fixed | Relative to viewport. Stays on screen while scrolling | |
| position: sticky | Relative until scroll threshold, then fixed within parent | |
| top: 0; right: 0 | Offset from edges (used with absolute/fixed/sticky) | |
| z-index: 10 | Stacking order (higher = on top). Only works on positioned elements | |
| inset: 0 | Shorthand for top: 0; right: 0; bottom: 0; left: 0 | |
| transform: translate(-50%, -50%) | Center trick: position absolute top/left 50% + this | |
| float: left | Float element (legacy; prefer flex/grid) | |
| clear: both | Clear floated elements (also: left, right) |
✨ Transitions & Animations
12▾
| transition: all 0.3s ease | Animate property changes. Shorthand: property duration timing | |
| transition: color 0.2s, background 0.2s | Multiple properties (comma-separated) | |
| transition-timing-function: ease-in-out | Also: linear, ease, ease-in, ease-out, cubic-bezier() | |
| animation: spin 1s linear infinite | Shorthand: name duration timing iteration | |
| @keyframes spin { to { transform: rotate(360deg) } } | Define keyframes (from/to or 0%/50%/100%) | |
| animation-fill-mode: forwards | Retain final keyframe state after animation ends | |
| animation-delay: 0.5s | Wait before starting animation | |
| animation-direction: alternate | Reverse on odd cycles: normal | reverse | alternate | |
| transform: scale(1.1) | Scale element (also: rotate, translateX/Y, skew) | |
| transform-origin: center | Point to rotate/scale from. Also: top left, 50% 50% | |
| will-change: transform | Hint browser to optimize (use sparingly) | |
| @media (prefers-reduced-motion: reduce) | Disable animations for users who prefer less motion |
🎯 Selectors & Pseudo-classes
18▾
| .class | Class selector | |
| #id | ID selector (high specificity — use sparingly) | |
| div > p | Direct child combinator | |
| div p | Descendant combinator (any nested p) | |
| h1 + p | Adjacent sibling (immediately after h1) | |
| h1 ~ p | General sibling (any p after h1) | |
| a:hover | Mouse over state | |
| a:focus | Keyboard focus state (always style this!) | |
| a:focus-visible | Focus only when using keyboard (not mouse click) | |
| a:active | Being clicked/pressed | |
| input:checked | Checked checkbox or radio | |
| input:disabled | Disabled form element | |
| input:placeholder-shown | Input with visible placeholder (empty) | |
| li:first-child | First child element | |
| li:last-child | Last child element | |
| li:nth-child(odd) | Every odd child. Also: even, 3n, 3n+1 | |
| div:not(.active) | Elements that do NOT match the selector | |
| [data-theme="dark"] | Attribute selector. Also: [attr], [attr^="start"], [attr*="contains"] |
🔧 Variables, Functions & At-Rules
10▾
| --primary: #3b82f6 | Define custom property (CSS variable) | |
| color: var(--primary) | Use custom property | |
| color: var(--color, #000) | Use variable with fallback value | |
| :root { --gap: 16px } | Global scope for custom properties | |
| calc(100% - 48px) | Mix units in calculations | |
| min(100%, 800px) | Use smallest value (also: max(), clamp()) | |
| @media (max-width: 768px) | Mobile breakpoint. Also: min-width, prefers-color-scheme | |
| @media (prefers-color-scheme: dark) | Detect dark mode preference | |
| @import url('styles.css') | Import another stylesheet (use sparingly — adds request) | |
| @layer utilities { ... } | Cascade layers for specificity control (modern CSS) |
CSS FAQ
What is CSS flexbox and when should I use it? +
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model for arranging items in a row or column. Use flexbox for navigation bars, centering elements, distributing space among items, and any layout along a single axis. For two-dimensional layouts (rows AND columns simultaneously), use CSS Grid instead.
What is the difference between CSS Grid and Flexbox? +
Flexbox works along one axis at a time (either row or column), making it ideal for components and small-scale layouts. CSS Grid works in two dimensions simultaneously (rows and columns), making it ideal for page layouts and complex grid-based designs. You can nest them — Grid for the overall layout, Flexbox for components within cells.
How do I center a div in CSS? +
The modern way: set the parent to
display: flex; align-items: center; justify-content: center; — this centers the child both horizontally and vertically. For absolute centering: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); For horizontal centering only: margin: 0 auto; with a defined width.What are CSS custom properties (variables)? +
CSS custom properties let you store values to reuse throughout your stylesheet. Define with double dash prefix:
--primary-color: #3b82f6; and use with var(): color: var(--primary-color); They cascade and inherit, making them ideal for themes and design systems. Unlike Sass variables, CSS variables work at runtime and can be changed with JavaScript.How do CSS media queries work? +
Media queries apply CSS rules based on viewport conditions. The most common use is responsive breakpoints:
@media (max-width: 768px) { /* mobile styles */ }. Modern approach uses min-width (mobile-first): start with mobile styles, then use @media (min-width: 768px) to add styles for larger screens. Common breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl).What does position relative vs absolute vs fixed mean in CSS? +
position: relative moves an element relative to its normal position, creates a positioning context for absolute children. position: absolute removes from normal flow, positions relative to the nearest non-static ancestor. position: fixed positions relative to the viewport and doesn't scroll. position: sticky acts like relative until it hits a scroll threshold, then acts like fixed.How do CSS transitions and animations differ? +
CSS transitions animate property changes between two states, triggered by events (like :hover). They're defined on the element and fire when a property changes:
transition: color 0.3s ease;. CSS animations (using @keyframes) play automatically or on load, can loop, and can have multiple steps. Use transitions for hover effects; use animations for loading spinners or sequences.What is the CSS box model? +
Every element has: content, padding (space inside border), border, and margin (space outside border). By default (box-sizing: content-box), width applies to content only. Use
box-sizing: border-box globally (* { box-sizing: border-box }) to make width include padding and border — much more intuitive for layout work.