CSS Flexbox Generator

Visually configure Flexbox container and item properties with a live preview. Copy the generated CSS instantly.

Click an item to edit its individual properties below.

Item 1 Properties

Generated CSS
Configure the Flexbox container above, then click items to adjust individual properties.

How to Use the Flexbox Generator

  1. Choose a flex-direction using the chips at the top — row (horizontal), column (vertical), or reversed variants.
  2. Set container properties — justify-content, align-items, flex-wrap, and gap control how all items are arranged.
  3. Add or remove items using the buttons above the preview to see how the layout adapts.
  4. Click any item in the preview to select it and edit its individual flex-grow, flex-shrink, flex-basis, order, and align-self values.
  5. Copy or download the generated CSS for both the container and all items.

Understanding CSS Flexbox

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that distributes space along a single axis — either horizontally (row) or vertically (column). It excels at tasks that were previously painful with floats and inline-block: centering elements, distributing space between items, and making items equal height regardless of content. Since its introduction, Flexbox has become the default tool for component-level layout in virtually every CSS framework.

The Main Axis and Cross Axis

Flexbox has two axes that change based on flex-direction. When direction is row (the default), the main axis runs horizontally left to right, and the cross axis runs vertically top to bottom. When direction is column, these flip. justify-content always controls alignment on the main axis. align-items always controls alignment on the cross axis. Understanding this relationship is the key to mastering Flexbox — once you know which axis you are on, the behavior becomes predictable.

The Three Flex Properties

Each flex item can have three properties that control how it sizes itself: flex-grow determines how much the item expands when extra space is available. flex-shrink determines how much it contracts when there is not enough space. flex-basis sets the initial size before growing or shrinking. The shorthand flex: 1 sets grow to 1, shrink to 1, and basis to 0%, which distributes space equally. flex: auto sets grow to 1, shrink to 1, and basis to auto, which grows items proportionally to their content size.

Common Flexbox Patterns

  • Perfect centering: display: flex; justify-content: center; align-items: center;
  • Sticky footer: min-height: 100vh; display: flex; flex-direction: column; with flex: 1 on the main content
  • Equal height cards: display: flex; align-items: stretch; (stretch is the default)
  • Space between nav items: display: flex; justify-content: space-between;
  • Responsive pill row: display: flex; flex-wrap: wrap; gap: 0.5rem;

align-items vs align-content

align-items controls how individual items are aligned on the cross axis within a single row or column. align-content only has an effect when items wrap onto multiple lines (when flex-wrap: wrap is set). It controls how the rows themselves are distributed along the cross axis. If all items fit on one line, align-content has no visual effect. This distinction is a common source of confusion — if your items are not wrapping, focus on align-items.

Flexbox and Accessibility

The order property lets you visually reorder flex items without changing the HTML source order. This is powerful for responsive layouts where you want a sidebar to appear below main content on mobile but to the left on desktop. However, be aware that screen readers and keyboard navigation follow the source order, not the visual order. If you change the visual order in a way that does not match the logical reading order, it can create a confusing experience for keyboard users. Always test with keyboard navigation when using order. For full page layout with semantic ordering, combine Flexbox for components with CSS Grid for the page shell.

Frequently Asked Questions

justify-content controls alignment along the main axis (horizontal by default for flex-direction: row). align-items controls alignment along the cross axis (vertical by default). When you change flex-direction to column, the axes flip: justify-content controls vertical alignment and align-items controls horizontal alignment.
flex-grow determines how much a flex item grows relative to other items when extra space is available in the container. A value of 1 means the item takes an equal share of extra space. A value of 2 means it takes twice as much extra space as items with flex-grow: 1. A value of 0 (the default) means the item does not grow at all.
The simplest way to center a single element both horizontally and vertically is: display: flex; justify-content: center; align-items: center; on the parent container. This is the most common use case for Flexbox and requires no fixed heights or absolute positioning.
flex-basis sets the initial main-axis size of a flex item before any growing or shrinking. It works similarly to width (for row layouts) or height (for column layouts). A value of auto uses the item's content size. Setting flex-basis: 0 combined with flex-grow: 1 makes items distribute space equally regardless of their content size.
Use Flexbox for one-dimensional layouts — when you only need to control either a row or a column of items at a time. Navigation bars, button groups, form rows, and centering single elements are ideal Flexbox use cases. Use CSS Grid when you need to control both rows and columns simultaneously, such as page layouts, card grids, and dashboards.