CSS
CSS properties, Flexbox, Grid, and selectors
Web Development
Flexbox Container
display: flexEnable flexbox
flex-direction: row | columnMain axis direction
justify-content: centerAlign on main axis
align-items: centerAlign on cross axis
flex-wrap: wrapAllow wrapping
gap: 1remSpace between items
Flexbox Items
flex: 1Grow to fill space
flex-grow: 1Growth factor
flex-shrink: 0Prevent shrinking
flex-basis: 200pxInitial size
align-self: flex-endOverride alignment
Grid Container
display: gridEnable grid
grid-template-columns: 1fr 1frDefine columns
grid-template-rows: autoDefine rows
gap: 1remSpace between cells
grid-template-columns: repeat(3, 1fr)Repeat pattern
grid-auto-flow: denseFill gaps automatically
Grid Items
grid-column: 1 / 3Span columns
grid-row: 1 / 2Span rows
grid-area: headerNamed area
place-self: centerCenter in cell
Selectors
.classClass selector
#idID selector
div > pDirect child
div pDescendant
div + pAdjacent sibling
div ~ pGeneral sibling
:hover, :focus, :activeState pseudo-classes
::before, ::afterPseudo-elements
:nth-child(2n)Every even child
:not(.class)Negation
Units
pxPixels (absolute)
remRelative to root font-size
emRelative to parent font-size
%Percentage of parent
vw, vhViewport width/height
frFraction unit (grid)