Why would you use flex-wrap CSS property and what values can it have?

Experience Level: Junior
Tags: CSSFlexbox

Answer

The flex-wrap property affects how the flex container items will be wrapped.

It can have the following values:

  • nowrap - this makes all the flex items stay on the one row (for row direction) or column (for column direction)
  • wrap - this makes all the flex items that don't fit on one row (for row direction) or column (for column direction) wrap to another row/column.
  • wrap-reverse - this has the same value as wrap, except the items wrap to the other side.
div {
  display: flex;
  flex-wrap: nowrap;
}

Comments

No Comments Yet.
Be the first to tell us what you think.
Flexbox
Flexbox

Are you learning Flexbox ? Try our test we designed to help you progress faster.

Test yourself
25 Flexbox questions that will help you to nail your job interview
25 Flexbox questions that will help you to nail your job interview

Are you learning Flexbox ? Try our test we designed to help you progress faster.

Test yourself