flex-direction & flex-wrap

flex-direction

Controls the direction items flow:

Value	Direction
`row`	Left → right (default)
`row-reverse`	Right → left
`column`	Top → bottom
`column-reverse`	Bottom → top

flex-wrap

By default items try to fit on one line. flex-wrap: wrap lets them wrap to the next line when there is not enough space.

Example

.row {
  display: flex;
  flex-direction: row;     /* default */
  flex-wrap: wrap;
  gap: 12px;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Cards that wrap to next row on small screens */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.grid > * {
  flex: 1 1 200px;   /* grow, shrink, min-width */
}

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned