CSS Flexbox Playground
Visually explore the power of CSS Flexbox. Tweak alignment, direction, and wrapping to build dynamic layouts and instantly generate the CSS code.
Flexbox Settings
Interactive Preview
.flex-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 10px;
}The Ultimate Guide to CSS Flexbox
Welcome to our interactive CSS Flexbox Playground. Before Flexbox (Flexible Box Layout Module) was introduced, aligning elements vertically or distributing space evenly among items was notoriously difficult. Developers had to rely on cumbersome hacks involving floats, clearfixes, and absolute positioning. Flexbox revolutionized web design by providing a clean, predictable, one-dimensional layout model specifically designed for complex web applications.
The Flex Container and Flex Items
To start using Flexbox, you must define a flex container by setting display: flex; on a parent element. As soon as you do this, all direct children of that container become "flex items."
Flexbox is "one-dimensional." This means it focuses on laying out items either in a single row or a single column, but not both simultaneously (that is the job of CSS Grid).
Understanding the Axes
The core concept of Flexbox relies on two axes: the Main Axis and the Cross Axis.
- The Main Axis: This is defined by the
flex-directionproperty. Ifflex-directionis set torow(the default), the main axis runs horizontally. If it is set tocolumn, the main axis runs vertically. - The Cross Axis: This axis runs perpendicular to the main axis. If your items are in a row, the cross axis is vertical.
Aligning Content: Justify vs. Align
The most common use cases for Flexbox involve centering items. You control alignment using two distinct properties:
1. justify-content
This property aligns items along the Main Axis. It controls how the browser distributes leftover free space between and around flex items.
flex-start: Items pack to the start of the line.center: Items are centered.space-between: The first item is at the start, the last item is at the end, and the space between is distributed evenly.
2. align-items
This property aligns items along the Cross Axis.
stretch(default): Items stretch to fill the container vertically.center: Items are centered vertically within the container.flex-start/flex-end: Items align to the top or bottom of the container.
To perfectly center an element both horizontally and vertically, you simply apply display: flex; justify-content: center; align-items: center; to its parent.
Flex Wrap
By default, flex items will try to cram themselves onto a single line, shrinking their width if necessary. If you want a responsive grid of cards that drops down to the next line when there isn't enough room, you must use flex-wrap: wrap;.
Use our interactive playground above to toggle wrapping and see how the flex items behave as you increase the number of items or change their direction.
Spacing with Gap
Historically, to put space between flex items, developers had to apply margins to the items and then negative margins to the container to offset the edges. Modern browsers now support the gap property directly on flex containers. Setting gap: 20px; automatically injects exactly 20 pixels of space between the items, both horizontally and vertically, without pushing against the container walls.
