Generated CSS

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}

Generated HTML

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

Tip: Hover over an item to see the delete option. Click on an item to edit its properties.

Container

1. Direction

2. Justify Content

3. Align Items

4. Flex Wrap

5. Gap

Selected Item

Click an element in the preview to edit its flex-grow, shrink, basis, align-self and order.

About CSS Flexbox Generator

Build CSS Flexbox layouts visually with our free Flexbox Generator. Arrange elements, adjust Flexbox properties, and instantly generate clean CSS without writing Flexbox code manually.