CSS Flexbox Generator

CSS Flexbox is a one-dimensional layout model that distributes space along a main axis (horizontal or vertical). It excels at aligning items, distributing space, and handling dynamic or unknown sizes.

Container Properties

• flex-direction: Sets the main axis — row (left to right), row-reverse, column (top to bottom), or column-reverse
• flex-wrap: Controls whether items wrap onto multiple lines (nowrap, wrap, wrap-reverse)
• justify-content: Aligns items along the main axis (e.g., flex-start, center, space-between)
• align-items: Aligns items along the cross axis (stretch, center, flex-start, flex-end, baseline)
• align-content: Distributes space between wrapped lines (only applies when flex-wrap is set)
• gap: The spacing between flex items in pixels

Item Properties

• flex-grow: How much an item should grow relative to siblings. A value of 1 means it takes available space equally
• flex-shrink: How much an item should shrink when space is limited. Default is 1
• flex-basis: The initial size before growing or shrinking. Use auto for content-based or set a pixel/percentage value
• align-self: Overrides align-items for a single item
• order: Controls the visual order of items without changing DOM order

Tips

• Use justify-content: space-between for navigation bars with items pushed to edges
• Combine flex-wrap: wrap with flex-basis percentages for responsive card grids
• Center anything vertically and horizontally with justify-content: center and align-items: center
• Use flex-grow: 1 on a main content area to fill remaining space in a layout

You can embed this util on your own site as a widget. Adding ?embed=1 to the URL loads a compact version with just the tool itself; no header, menu, or documentation. Paste this snippet into your HTML:

Copy snippet Adjust the height to taste.