How to use flex-wrap

Home

Logout

  • When you give a width property to an element in flexbox the elements will adapt this size in the container, but if the container is too small to contain the size that you gave so the elements will stretch in the container.
  • In our example above we gave a width; 600px to our elements but the container is too small to contain this size so in flexbox because of flex-wrap: nowrap the elements stretch to fill the container instead of returning to the line.
  • So as you can understand the flex-wrap property acts on the return to the line of your elements.
  • If you want change that you can simply use flex-wrap: wrap