Web Development35 entries

CSS Flexbox

Flex container and item properties, alignment, ordering, and common layout patterns

1Container Properties

`display: flex`	Enable flex layout on container
`display: inline-flex`	Inline-level flex container
`flex-direction: row`	Main axis: left to right (default)
`flex-direction: row-reverse`	Main axis: right to left
`flex-direction: column`	Main axis: top to bottom
`flex-direction: column-reverse`	Main axis: bottom to top
`flex-wrap: nowrap`	Single line (default)
`flex-wrap: wrap`	Wrap to multiple lines
`flex-wrap: wrap-reverse`	Wrap in reverse direction

`justify-content: flex-start`	Pack items to start (default)
`justify-content: flex-end`	Pack items to end
`justify-content: center`	Center items along main axis
`justify-content: space-between`	Equal space between items
`justify-content: space-around`	Equal space around items
`justify-content: space-evenly`	Equal space between and around

`align-items: stretch`	Stretch items to fill (default)
`align-items: flex-start`	Align items to cross-start
`align-items: flex-end`	Align items to cross-end
`align-items: center`	Center items on cross axis
`align-items: baseline`	Align items by text baseline
`align-content: flex-start`	Pack lines to start (multi-line)
`align-content: center`	Center lines (multi-line)
`align-content: space-between`	Space between lines (multi-line)

`flex: 1`	Shorthand: grow=1, shrink=1, basis=0%
`flex: 0 0 200px`	Fixed 200px, no grow/shrink
`flex-grow: 1`	Allow item to grow (proportion)
`flex-shrink: 0`	Prevent item from shrinking
`flex-basis: 200px`	Initial size before grow/shrink
`flex-basis: auto`	Use content size as basis
`align-self: center`	Override align-items for this item
`order: -1`	Change visual order (lower = first)

useState, useEffect, useRef, useMemo, React 19 hooks, and custom hook patterns

Grid container and item properties, template areas, auto-placement, and responsive grids

Complete HTTP status code reference: 1xx informational through 5xx server errors