How to make display:flex items go to the next line, automatically?

December 10, 2021

So am new to learning/using the "display: flex" property.

*{
    margin: 10px;
    padding: 0;
    -webkit-margin:0;
    -webkit-padding:0;
}
.container {
    display: flex;
  }
  
  .imagebox {
    position: relative;
    flex: 1;
    margin: 15px;
  }
  
  .imagebox img {
    max-height: 200px;
    max-width: 100%;
    position: absolute;
  }

<div class="container">
        <div class="imagebox">
          <a href="#" class="images">
                  <img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
          </a>
        </div>
      
        <div class="imagebox">
          <a href="#" class="images">
            <img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
          </a>
        </div>
      
        <div class="imagebox">
            <a href="#" class="images">
              <img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
            </a>
          </div>

          <div class="imagebox">
            <a href="#" class="images">
              <img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
            </a>
          </div>
      </div>

Here are 4 boxes of a certain size but if I insert one more, the size gets smaller as it tries to fit the 5th box in the same line, how to get the 5th box in the next line?

*{
    margin: 10px;
    padding: 0;
    -webkit-margin:0;
    -webkit-padding:0;
}
.container {
    display: flex;
  }
  
  .imagebox {
    position: relative;
    flex: 1;
    margin: 15px;
  }
  
  .imagebox img {
    max-height: 200px;
    max-width: 100%;
    position: absolute;
  }

<div class="container">
        <div class="imagebox">
          <a href="#" class="images">
                  <img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
          </a>
        </div>
      
        <div class="imagebox">
          <a href="#" class="images">
            <img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
          </a>
        </div>
      
        <div class="imagebox">
            <a href="#" class="images">
              <img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
            </a>
          </div>

          <div class="imagebox">
            <a href="#" class="images">
              <img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
            </a>
          </div>

       <div class="imagebox">
            <a href="#" class="images">
              <img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
            </a>
          </div>
      </div>

I want the images to automatically go on to the next line when it reaches the end of the main container, I have tried reducing the width as well, it didn’t work.
It’s probably something very simple but I can’t really seem to find the way, also am not fully accustomed with all the flexbox properties

>Solution :

change width of .imagebox {} accordingly

*{
    padding: 0;
    -webkit-margin:0;
    -webkit-padding:0;
}
.container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .imagebox {
    position: relative;
    margin: 15px;
    width: 20%;
  }
  
  .imagebox img {
    max-height: 200px;
    max-width: 100%;
  }

<div class="container">
        <div class="imagebox">
          <a href="#" class="images">
                  <img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
          </a>
        </div>
      
        <div class="imagebox">
          <a href="#" class="images">
            <img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
          </a>
        </div>
      
        <div class="imagebox">
            <a href="#" class="images">
              <img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
            </a>
          </div>

          <div class="imagebox">
            <a href="#" class="images">
              <img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
            </a>
          </div>

       <div class="imagebox">
            <a href="#" class="images">
              <img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
            </a>
          </div>
      </div>