Flexbox Layouts
Flexbox makes it easy to arrange items in a row or column. Set display: flex on a container, then control direction, alignment, and spacing. justify-content aligns items along the main axis; align-items aligns along the cross axis. gap adds space between items without needing margins.
Appy Says…
For 20 years, centring a div in CSS was infamously hard. Flexbox solved it in one line. Today, Flexbox is the foundation of almost every modern web layout — from navbars to card grids to sidebars.
What is Flexbox?
CSS Flexbox arranges elements in a container along one axis (row or column). The parent declares display: flex and its children automatically become flex items.
- •
display: flex— activate flexbox on the container - •
flex-direction: row | column | row-reverse | column-reverse - •
justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly(main axis) - •
align-items: stretch | center | flex-start | flex-end | baseline(cross axis) - •
gap: 16px— space between items - •
flex: 1on child — grow to fill available space - •
flex-wrap: wrap— wrap items to next line
Think of it like a Roblox GUI ScreenGui layout
Roblox's ScreenGui lets you pin UI elements with offsets and anchors. Flexbox is like having a smart layout container that automatically positions and spaces its children — you just say 'centre them with gaps' and it's done.
How It Works
- •1. Parent:
display: flex; justify-content: space-between; align-items: center; - •2. Children become flex items — laid out along the main axis (default: row)
- •3.
justify-contentcontrols spacing along the main axis - •4.
align-itemsaligns items on the perpendicular axis - •5.
flex: 1on a child = 'take all remaining space' - •6. Perfect centre:
display: flex; justify-content: center; align-items: center;
Real-World Examples
- •Navbar: logo left, links right —
justify-content: space-between - •Icon + label button:
display: flex; align-items: center; gap: 8px; - •Sidebar layout: parent flex-row, sidebar fixed width, main
flex: 1 - •Responsive card row:
display: flex; flex-wrap: wrap; gap: 16px;
Key Facts
- •
flex: 1is shorthand forflex-grow: 1; flex-shrink: 1; flex-basis: 0% - •Flexbox is 1D; CSS Grid is 2D — use Flexbox for components, Grid for page layouts
- •
orderproperty changes visual order without changing DOM order - •Flex items ignore
floatandvertical-align
Watch Out!
justify-content works on the main axis; align-items on the cross axis. If you set flex-direction: column, they swap roles. This catches everyone at least once.
Remember
Perfect center: display: flex; justify-content: center; align-items: center;. Use gap for spacing between items instead of margins.
What You Learned
- •Flexbox: display:flex on parent; justify/align children along main and cross axes
- •gap for spacing, flex:1 to fill space, flex-wrap for responsive rows
- •Unlocks: navbars, card rows, centring, sidebars, any 1D layout challenge
Key Facts
- →
flex: 1is shorthand forflex-grow: 1; flex-shrink: 1; flex-basis: 0% - →Flexbox is 1D; CSS Grid is 2D — use Flexbox for components, Grid for page layouts
- →
orderproperty changes visual order without changing DOM order - →Flex items ignore
floatandvertical-align
Real-World Examples
Remember
Perfect center: display: flex; justify-content: center; align-items: center;. Use gap for spacing between items instead of margins.
Quick Quiz
What does display: flex do?