CSS · Chapter 22 of 44
CSS Flexbox
Flexbox is a one-dimensional layout system for arranging items in a row or column. Setting display: flex on a container turns its children into flex items that can grow, shrink, and align easily.
Key container properties include flex-direction, justify-content (main-axis alignment), and align-items (cross-axis alignment).
Syntax
display: flex;
justify-content: center;
align-items: center;Flex container basics
display: flex creates a flex container. flex-direction: row or column sets the main axis. justify-content aligns items along that axis.
Aligning items
align-items aligns items on the cross axis (e.g., vertically in a row layout). flex-wrap allows items to wrap onto multiple lines.
Example 1 (css)
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}Output
Nav items spread evenly across the row, vertically centeredspace-between spaces items with equal gaps, and align-items centers them vertically.
Key points
- display: flex turns a container's children into flex items.
- flex-direction sets row or column layout.
- justify-content aligns items along the main axis.
- align-items aligns items along the cross axis.
💡 Note: Flexbox is ideal for one-dimensional layouts like navbars, toolbars, and card rows.