Flex Container

Setting display: flex on a container is just the beginning. Once you do that, a bunch of properties become available to control exactly how the flex items behave. These are the flex container properties, and they are your main tools for layout.

Flex Direction

By default, flex items sit in a row (left to right). You can change this with flex-direction:

.container {
  display: flex;
  flex-direction: row;        /* default — left to right */
  flex-direction: row-reverse; /* right to left */
  flex-direction: column;      /* top to bottom */
  flex-direction: column-reverse; /* bottom to top */
}
    

row-reverse and column-reverse also flip the start and end positions, which can be handy for layouts that need to work in both directions.

Flex Wrap

By default, flex items try to squeeze into one line. If they do not fit, they overflow. flex-wrap changes that behavior:

.container {
  display: flex;
  flex-wrap: nowrap;       /* default — no wrapping */
  flex-wrap: wrap;         /* items wrap to next line */
  flex-wrap: wrap-reverse; /* wrap in reverse direction */
}
    

wrap is your friend when you have a grid of items that need to flow naturally across the screen. Cards in a gallery, for example.

Flex Flow

The flex-flow property is a shorthand that combines flex-direction and flex-wrap into one line:

.container {
  display: flex;
  flex-flow: row wrap;
}

/* This is the same as: */
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
    

It saves you a line and keeps your code cleaner. You will see this a lot in real projects.