Use the flex-wrap Property to Wrap a Row or Column

having trouble with this concept

kindly help out : )

please be clear and start at the beginning
.
maybe an example or 2

also, when should be using flex-wrap?

i mean under what circumstances

thanks!

For starters it would be good to point out a fact about HTML elements. As you may have already noticed, the majority of HTML elements won’t share the same horizontal space with each other.
If you create a <p> than regardless of how little information there is, it will take up all of the horizontal space in other words you can’t put an element like <img> on the same line.*

extra note

*note that there are elements that can be children of <p> and as such stay in the same horizontal space. These include elements like <a> and <span>.

In order to fit elements side by side there are a number of CSS properties you can use. One of the most common is display: flex; which fits as many elements as it can into a horizontal line. To do this, it compresses the contents of the children of its element, and then places them on the horizontal space.

Try this code for example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    
    <style>
      #wrap {
        height: 150px;
        width: 20px;
        border: 1px solid blue;

        display: flex; 
        //try commenting the above line out to see the difference
      }

      div {
        border: 1px solid green;
        width: 200px;
      }
      
    </style>
    
</head>

<body>
    
    <div id="wrap">
        <div> Numero Uno </div>
        <div> Numero Duos </div>
        <div> Numero Tres </div>
    </div>

</body>

</html>

display: flex; will however overflow the element, meaning its content will be outside of its borders, the is were flex-wrap comes in. flex-wrap specifies the behavior of a wrap around its element which effects its content. For example, adding flew-wrap: wrap; to a flexbox element, will make it so the children can not escape it.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    
    <style>
      #wrap {
        height: 150px;
        width: 20px;
        border: 1px solid blue;

        display: flex;
        flex-wrap: wrap;
      }

      div {
        border: 1px solid green;
        width: 200px;
      }
      
    </style>
    
</head>

<body>
    
    <div id="wrap">
        <div> Numero Uno </div>
        <div> Numero Duos </div>
        <div> Numero Tres </div>
    </div>

</body>

</html>

Note that now the elements will still take up more horizontal space than they could before, but now they will not exit their parent container.

For more information I recommend taking a look at the documentation:

1 Like