hexagon

Flexbox Generator

Visually build and experiment with Flexbox layouts in real-time.

Live Preview

codeGENERATED CSS

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

Flexbox Reference

Main Axis

Defined by flex-direction. Horizontal for 'row', Vertical for 'column'.

Justify Content

Aligns items along the Main Axis (e.g., center, space-between).

Align Items

Aligns items along the Cross Axis (perpendicular to Main Axis).

Flex Grow

Defines the ability for a flex item to grow if necessary.

Flex Shrink

Defines the ability for a flex item to shrink if necessary.

Flex Basis

Defines the default size of an element before the remaining space is distributed.