2.0 Flexbox

Flexbox (display: flex) provides a one-dimensional layout model that arranges items along a single main axis (row or column). It excels at distributing space and aligning items within a container, even when their sizes are unknown or dynamic. Flexbox containers are widely used for toolbars, card rows, centered content, and responsive navigation. One important difference from normal block layout: margins do not collapse inside a flex container. The demo below shows three flex items in a row container. The middle item has flex: 1 1 0, so it grows to fill all remaining space. The outer items have fixed content widths.

<div id="flex-demo">
  <div id="flex-a">Fixed</div>
  <div id="flex-b">Grows to fill</div>
  <div id="flex-c">Fixed</div>
</div>

#flex-demo {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.6rem;
  border: 2px solid steelblue;
  background: #f0f4f8;
  width: 26rem;
}
#flex-a, #flex-c { padding: 0.4rem 0.8rem; }
#flex-b { flex: 1 1 0; text-align: center; padding: 0.4rem 0.8rem; }

The flex shorthand sets three item properties at once: flex: <grow> <shrink> <basis>. With basis: 0, all available space is distributed proportionally. Treating grow and shrink as boolean flags gives four common combinations:

flex value	flex-grow	flex-shrink	Behavior
flex: 0 0 0	0	0	Locked - no grow, no shrink
flex: 0 1 0	0	1	Shrinks if overflow, never grows
flex: 1 0 0	1	0	Fills free space, never shrinks
flex: 1 1 0	1	1	Fully fluid; equal sharing

Table 1. - Flexbox Container & Item Properties

A Complete Guide to Flexbox - CSS-Tricks

Property / Concept	Applies to	Purpose / Common Values	Example
Core setup
display	Container	Enable flex context. flex | inline-flex.	.row { display: flex; }
Main / Cross Axis	Concept	Main axis follows flex-direction; cross axis is perpendicular.	row → main=x, cross=y
Direction & wrapping
flex-direction	Container	Main axis direction: row | row-reverse | column | column-reverse.	.col { flex-direction: column; }
flex-wrap	Container	Wrap items: nowrap | wrap | wrap-reverse.	.row { flex-wrap: wrap; }
flex-flow	Container	Shorthand for flex-direction + flex-wrap.	.row { flex-flow: row wrap; }
Distribution & alignment
justify-content	Container	Distribute along main axis: flex-start | center | flex-end | space-between | space-around | space-evenly.	.row { justify-content: space-between; }
align-items	Container	Align items on cross axis: stretch | flex-start | center | flex-end | baseline.	.row { align-items: center; }
align-content	Container (multi-line)	Align wrapped lines on cross axis. Same values as justify-content.	.row { align-content: space-around; }
gap	Container	Spacing between items/lines. Also row-gap, column-gap.	.row { gap: 0.75rem; }
Item sizing & order
order	Item	Visual order (default 0). Lower values appear first.	.item:first-child { order: 2; }
flex-grow	Item	Share of remaining space along main axis. 0 = don't grow.	.item { flex-grow: 1; }
flex-shrink	Item	Shrink factor when overflowing. 0 = don't shrink.	.item { flex-shrink: 0; }
flex-basis	Item	Initial size before grow/shrink. auto, 0, or a length.	.card { flex-basis: 16rem; }
flex	Item	Shorthand: <grow> <shrink> <basis>. Presets: flex:1 (1 1 0), flex:auto (1 1 auto), flex:none (0 0 auto).	.fill { flex: 1 1 0; }
align-self	Item	Override align-items for one item.	.logo { align-self: flex-end; }
Recipes & tips
Equal columns	Recipe	Children share width equally.	.row { display:flex } .row > * { flex: 1 1 0 }
Fixed + fluid	Recipe	Sidebar fixed, content fills rest.	.side{flex:0 0 12rem} .main{flex:1 1 0}
Center box	Recipe	Center one item on both axes.	.wrap{display:flex; justify-content:center; align-items:center}
Push last right	Recipe	Push trailing item to end of row.	.row{display:flex} .last{margin-left:auto}
Min-size trap	Tip	Items refuse to shrink past min-content. Fix with min-width:0 on item.	.item { min-width: 0; }
Scrollable child	Tip	Set min-height:0 on parent and overflow:auto on child.	.parent{min-height:0} .pane{overflow:auto}

2.1 CSS Grid

CSS Grid (display: grid) provides a two-dimensional layout model with explicit rows and columns. It is ideal for full-page layouts, card galleries, and any design where items need to be placed at specific row/column intersections. Grid and Flexbox are complementary: Grid for two-dimensional structure, Flexbox for one-dimensional alignment within grid cells. The demo below shows a named-area grid with a header, sidebar, main content, and footer. The sidebar column is fixed at 6rem; the main column takes the remaining space (1fr).

<div id="grid-demo">
  <div class="g-header">Header</div>
  <div class="g-side">Sidebar</div>
  <div class="g-main">Main content</div>
  <div class="g-footer">Footer</div>
</div>

#grid-demo {
  display: grid;
  grid-template-areas: "header header" "side main" "footer footer";
  grid-template-columns: 6rem 1fr;
  gap: 0.4rem;
  border: 2px solid steelblue;
  padding: 0.5rem;
  width: 24rem;
}
.g-header { grid-area: header; }
.g-side   { grid-area: side; }
.g-main   { grid-area: main; }
.g-footer { grid-area: footer; }

Table 2. - CSS Grid Container & Item Properties

A Complete Guide to Grid - CSS-Tricks

Property / Concept	Applies to	Purpose / Common Values	Example
Core setup
display	Container	Enable grid context. grid | inline-grid.	.grid { display: grid; }
Defining tracks
grid-template-columns / grid-template-rows	Container	Define track sizes: lengths, %, fr, auto, repeat(), minmax().	.grid { grid-template-columns: 200px 1fr; }
grid-template-areas	Container	Name regions for semantic placement.	"header header" "side main"
grid-template	Container	Shorthand for rows / columns / areas.	.grid { grid-template: "h h" 60px "s m" 1fr / 200px 1fr; }
grid-auto-rows / grid-auto-columns	Container	Size tracks auto-created by overflow content.	.grid { grid-auto-rows: minmax(100px, auto); }
grid-auto-flow	Container	Fill algorithm: row | column | dense variants.	.grid { grid-auto-flow: row dense; }
Gaps & alignment
gap / row-gap / column-gap	Container	Spacing between rows and columns.	.grid { gap: 1rem; }
justify-items	Container	Align all cells on inline axis: start | center | end | stretch.	.grid { justify-items: center; }
align-items	Container	Align all cells on block axis.	.grid { align-items: start; }
justify-content	Container	Align whole grid in container (inline axis): start | center | end | space-between | space-around.	.grid { justify-content: space-between; }
align-content	Container	Align whole grid in container (block axis).	.grid { align-content: center; }
place-items	Container	Shorthand for align-items / justify-items.	.grid { place-items: center; }
Item placement
grid-column / grid-row	Item	Place by grid line numbers: start / end. Use span N to span tracks.	.item { grid-column: 1 / 3; grid-row: 2; }
grid-area	Item	Assign to a named area, or shorthand for row-start / column-start / row-end / column-end.	.header { grid-area: header; }
justify-self	Item	Align one item in its cell (inline axis).	.item { justify-self: end; }
align-self	Item	Align one item in its cell (block axis).	.item { align-self: center; }
Recipes
Sidebar + content	Recipe	Fixed sidebar, fluid content.	.grid { display:grid; grid-template-columns: 200px 1fr; }
12-col responsive	Recipe	Equal-width flexible columns.	.grid { grid-template-columns: repeat(12, 1fr); gap: 1rem; }
Auto-fill cards	Recipe	Responsive card wrapping.	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
Named areas	Recipe	Semantic page regions.	grid-template-areas: "header header" "side main" "footer footer";

2.2 classList

element.classList is a DOMTokenList that manages the element's class attribute as a tokenized list. It is the standard way to add, remove, and toggle CSS classes at run time without touching className directly.

const el = document.querySelector('#panel');
el.classList.add('open');          // add a class
el.classList.remove('hidden');     // remove a class
el.classList.toggle('active');     // add if absent, remove if present
el.classList.contains('open');     // → true / false

Table 3. - classList (DOMTokenList) API

Kind	Member	Returns	Example
Element property
Property	element.classList	DOMTokenList	Tokenized view of the element's class attribute.
DOMTokenList methods
Method	add(...tokens)	void	el.classList.add('active', 'wide')
Method	remove(...tokens)	void	el.classList.remove('hidden', 'wide')
Method	toggle(token[, force])	boolean	el.classList.toggle('open', true) - returns true if present after call
Method	replace(oldToken, newToken)	boolean	el.classList.replace('old', 'new')
Method	contains(token)	boolean	el.classList.contains('active')
Method	item(index)	string | null	el.classList.item(0) → first class name or null
Method	forEach(callback)	void	el.classList.forEach(c => console.log(c))
Method	entries()	Iterator<[i, token]>	for (const [i, t] of el.classList.entries()) { ... }
Method	values()	Iterator<token>	[...el.classList.values()]
Method	toString()	string	Returns space-separated class string.
DOMTokenList properties
Property	length	number	Count of class tokens. el.classList.length
Property	value	string	Get/set the full class string. el.classList.value = 'a b c'