Flexbox Generator

Visually build CSS flexbox layouts and instantly generate the code.

Flex Direction

Justify Content (Main Axis)

Align Items (Cross Axis)

Flex Wrap

Gap (16px)

Number of Items

CSS Code

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