Flexbox and CSS Grid properties, alignment, positioning, z-index, stacking contexts and common layout patterns.
40 cards · basic cards · AI-written, checked twice. Edit anything.
- What does display:flex do?
Show answer
Creates a flex container; direct children become flex items- What is the main axis in flexbox?
Show answer
The primary axis along which flex items are laid out; horizontal by default- What is the cross axis in flexbox?
Show answer
The axis perpendicular to the main axis; vertical by default- What values does flex-direction accept?
Show answer
row, column, row-reverse, column-reverse- What does justify-content align in flexbox?
Show answer
Flex items along the main axis- What does align-items align in flexbox?
Show answer
Flex items along the cross axis- What does flex-wrap control?
Show answer
Whether flex items wrap to new lines or shrink to fit on one line- What does flex-grow control?
Show answer
How much a flex item grows relative to siblings; default is 0- What does flex-shrink control?
Show answer
How much a flex item shrinks relative to siblings; default is 1- What does flex-basis set?
Show answer
The default size of a flex item before free space is distributed- What is the flex shorthand property?
Show answer
Shorthand for flex-grow flex-shrink flex-basis; e.g., flex: 1 1 200px- What does gap do in flexbox?
Show answer
Adds uniform space between flex items, not at the edges- What does align-self do in flexbox?
Show answer
Overrides align-items for a single flex item- What does display:grid do?
Show answer
Creates a grid container; direct children become grid items- What does grid-template-columns define?
Show answer
The sizes and number of column tracks in a grid
FlashKeepers