📦

CSS Flexbox Generator

Create flexible layouts with CSS Flexbox. Visualize and customize flex container properties with live preview and generated CSS.

Flexbox Settings

Common Layouts
Select a common flexbox layout preset to automatically configure container properties
1612
Adjust the number of flex items from 1 to 12 for the layout preview
Flex Direction
Choose the main axis direction for flex items: row, row-reverse, column, or column-reverse
Justify Content (Main Axis)
Set alignment of items along the main axis: start, end, center, space-between, space-around, or space-evenly
Align Items (Cross Axis)
Set alignment of items along the cross axis: stretch, flex-start, flex-end, center, or baseline
Flex Wrap
Control whether flex items wrap to new lines: nowrap, wrap, or wrap-reverse
Set the gap between flex items using CSS units like px, rem, em, or shorthand for row and column gaps
Set the flex container width using CSS units like %, px, em, rem, vw, etc.
Set the flex container height using CSS units like px, em, rem, vh, etc.

Visual Preview

1
2
3
4
5
Flexbox Layout: row • flex-start • stretch • nowrap
Flexbox layout updated: Direction row, Justify flex-start, Align stretch, Wrap nowrap

Generated CSS

Complete CSS Code:
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 16px;
  width: 100%;
  height: 300px;
}

.flex-item {
  flex: 1;
  min-width: 0;
  padding: 1rem;
  background: #e5e7eb;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
}

HTML Example

Use this HTML structure with your generated CSS
<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
  <div class="flex-item">Item 5</div>
</div>

Flexbox Properties

display
flex
flex-direction
row
justify-content
flex-start
align-items
stretch
flex-wrap
nowrap
gap
16px

Layout Summary

Direction
row
Justify
flex-start
Align
stretch
Wrap
nowrap