Flexbox Containers & Directions
What is Flexbox?
Imagine you are arranging books on a single bookshelf. You want to align them in a straight line, either side-by-side (Row) or stacked vertically (Column). You want to easily control whether they align to the left side, the right side, or are spaced out evenly to fill the shelf.In CSS, Flexbox (Flexible Box Layout) is a one-dimensional layout system. It aligns child elements in a single direction (a row or a column). It is designed to scale and space items fluidly, even when their sizes are dynamic or unknown.
display: flex;.row (default): Placed horizontally (left-to-right).column: Stacked vertically (top-to-bottom).Why does it matter?
Before Flexbox, aligning elements side-by-side required tricky float hacks or table layouts. Flexbox makes horizontal lists, navigation headers, sidebars, and grid items incredibly simple to build, auto-adjusting their spacing on different screen sizes.Syntax Breakdown
display: flex; — Initializes the flex container.flex-direction: row; — Places items side-by-side.flex-direction: column; — Stacks items vertically.Flex Item 1
Flex Item 2
Common Mistakes
<div> (flex) -> <ul> -> <li>, the <li> tags will not be affected by the container's flex rules—only the <ul> will!Quick Reference
display: flex — Creates a block-level flex container.flex-direction: row — Lays out items horizontally.flex-direction: column — Lays out items vertically.Your Task
Turn `.row-layout` into a flex container using `display: flex;` and set its `flex-direction` to `row`.
index.html
Type code above to start the lesson.
Live Preview