CSS Tool
Build flexbox layouts visually — click through flex-direction, wrap, justify-content and align-items options and watch a live container update in real time. Copy the CSS or map it straight to Bootstrap 5 utility classes.
flex-direction
flex-wrap
justify-content
align-items
gap
Child boxes
4Live Preview
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 8px;
}CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that gives you powerful tools for distributing space and aligning items within a container. Set display: flex on any element and its direct children become flex items you can control with just a handful of properties.
Bootstrap 5 is built on flexbox. Classes like d-flex, justify-content-between, and align-items-center are thin wrappers around the flexbox properties shown in this generator. Understanding the underlying CSS makes it faster to build complex layouts.
In the Canvas HTML Template, headers, card groups, feature icon rows, and navigation menus all use flexbox under the hood. The .header-row is a flex container; feature boxes use flex for icon+text alignment. Knowing how to tweak the flexbox properties directly gives you fine-grained control when Bootstrap utilities are not enough.
The main axis is defined by flex-direction. When it’s row (default), justify-content works horizontally. Switch to column and the axes flip — justify-content now works vertically. This generator makes that mental model click by showing it live.
Click a flex-direction pill to set the main axis. Row lays items left-to-right; Column stacks them vertically.
Toggle flex-wrap to allow items to wrap onto a new line when they overflow the container.
Click a justify-content option to distribute items along the main axis.
Pick an align-items value to align items on the cross axis (perpendicular to the main axis).
Adjust gap and box count to stress-test the layout. Click Copy CSS to grab the final code.
| Pattern | Key properties |
|---|---|
| Centered hero | justify-content: center + align-items: center |
| Navigation bar | justify-content: space-between + align-items: center |
| Card row | justify-content: flex-start + align-items: stretch + flex-wrap: wrap |
| Stacked mobile | flex-direction: column + align-items: stretch |
| Centered single | justify-content: center + align-items: center (on a tall container) |
justify-content controls alignment along the main axis (horizontal when flex-direction is row, vertical when column). align-items controls alignment along the cross axis (perpendicular to the main axis). Think of it as: justify-content positions items left/right in a row layout; align-items positions them top/bottom.
Bootstrap 5 provides d-flex to enable display:flex, then justify-content-start/center/end/between/around/evenly, align-items-start/center/end/stretch/baseline, flex-wrap/nowrap, and gap-0 through gap-5. These map directly to CSS flexbox properties and can be combined with responsive breakpoint prefixes like justify-content-md-center.
Flexbox is a one-dimensional layout system — it works along a single axis (row or column) at a time. CSS Grid is two-dimensional and controls both rows and columns simultaneously. Use flexbox for navigation bars, button groups, and small UI components. Use Grid for full-page layouts, image galleries, and anything requiring explicit row + column placement.
Apply display: flex; justify-content: center; align-items: center on the parent container. This centers child elements both horizontally and vertically. Add a fixed height to the container if you need the centering to be visible. Bootstrap 5 shorthand: class='d-flex justify-content-center align-items-center'.
flex-wrap controls whether flex items are forced into one line or can wrap onto multiple lines when they overflow the container. nowrap (default) keeps all items on one line and they may shrink. wrap allows items to flow onto new lines. wrap-reverse wraps items in the opposite direction. Use flex-wrap: wrap to create responsive card grids.
Canvas Builder generates production-ready Canvas HTML Template pages with flexbox layouts already baked in — in seconds.
Try Canvas Builder