CSS Flexbox Generator

Overview

• Generates CSS Flexbox styles just by specifying flex-direction, justify-content, align-items, flex-wrap, and gap.

• You can add 1 to 12 items and set flex-grow, flex-shrink, flex-basis, order, and align-self for each item.

• The preview and the generated CSS update as soon as you change a value, so you can adjust the layout while watching how the items are arranged.

• Useful for building layouts commonly done with Flexbox, such as navigation bars or a row of cards.

Usage

1. 1

   In "Container (parent) settings", choose flex-direction, justify-content, align-items, and flex-wrap from the dropdowns, and enter the gap (px).

2. 2

   If needed, change the number of items with "Add item" and "Remove selected item".

3. 3

   Click an item in the preview to select it, then enter values such as flex-grow in its settings.

4. 4

   The preview and CSS update with every change. Copy the result to use it.

Example

row / space-between / center / wrap / 16px, item 2 flex-grow: 1

.container { display: flex; flex-direction: row; ... } .item-2 { flex-grow: 1; }

Use Cases

• Quickly generating CSS to arrange elements in a row, such as a navigation bar or toolbar

• Building a layout that arranges cards or buttons with even spacing while watching the preview

• Learning the difference in behavior between justify-content and align-items by checking an actual preview

• Building a layout where only some items grow (flex-grow), such as a sidebar and a main area

FAQ

Notes

• The gap can be 0 to 500px, flex-grow and flex-shrink 0 to 99, flex-basis 0 to 2000px (leave empty for auto), and order -99 to 99.

• For items, only properties changed from their initial values are output. Items left at their initial values are omitted.

• Class names such as .container and .item-1 are examples. Rename them to match your actual HTML.