CSS Flexbox Generator

Visually create flexbox layouts with live preview. Perfect for learning and building responsive designs.

Flex Direction

Flex Wrap

Justify Content

Align Items

Align Content

Gap: 10px

Items: 5

Live Preview

CSS Code

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 10px;

  /* Additional styling for demo */
  padding: 20px;
  background-color: #f0f0f0;
  min-height: 300px;
}

.flex-item {
  background-color: #4f46e5;
  color: white;
  padding: 20px;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  min-width: 80px;
}

HTML Code

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

Flexbox Quick Reference

justify-content:

Aligns items along the main axis (horizontal in row, vertical in column)

align-items:

Aligns items along the cross axis (vertical in row, horizontal in column)

flex-direction:

Defines the direction of the main axis

flex-wrap:

Controls whether items wrap to multiple lines

align-content:

Aligns wrapped lines (only works with flex-wrap)

gap:

Sets spacing between flex items