Wrap

Wrap

By default, all of the flex items will be on a single line. You can change that with the flex-wrap property. This property can have one of the following values:

• no-wrap - default, displays all items on the same line
• wrap - moves extra elements to the next line
• wrap-reverse - wraps elements to the previous line instead of the next one Here's an example:

.container {
  display: flex;
  border: 3px solid #ff5376;
  flex-direction: row;

  height: 300px;
  width: 200px;

  flex-wrap: wrap;
}
.item {
    background-color: #fee440;
    border: 1px solid #ff9505;
    
    width: 70px;
}

align-content

The align-content property is used to align multiple wrapped rows (or columns). Similar to align-items, align-content arranges elements on the cross-axis (so, vertically for rows). Here are the possible values for this property:

• stretch - default, stretches items to fill space
• center - all items in the center
• flex-start - aligned to the start of the contaier
• flex-end - aligned to the end of the container
• space-between - aligned with equal space between the lines of items
• space-around - like space between, but with the addition of space before the first line of items and after the last line of items

Example:

.container {
  display: flex;
  border: 3px solid #ff5376;
  flex-direction: row;

  height: 300px;
  width: 200px;

  flex-wrap: wrap;
  align-items: flex-end;
}