# Flexbox Generator

Visual Flexbox layout builder with live preview

## Live Preview

### Flex Direction
- row
- row-reverse
- column
- column-reverse

### Justify Content
- start
- center
- end
- space-between
- space-around
- space-evenly

### Align Items
- start
- center
- end
- stretch
- baseline

### Flex Wrap
- nowrap
- wrap
- wrap-reverse

### Gap (16px)

### Number of Items

## HTML

```html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
```

## CSS

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