如何使 display:flex 项自动转到下一行？

Question

所以我是 learning/using“显示：flex”的新手属性。

*{
    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>

这里有 4 个特定尺寸的盒子，但如果我再插入一个，尺寸会变小，因为它试图将第 5 个盒子放在同一行中，如何在下一行中放入第 5 个盒子？

*{
    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>

我希望图像在到达主容器的末尾时自动转到下一行，我也试过减小宽度，但没有用。这可能是非常简单的事情，但我似乎真的找不到方法，也没有完全习惯所有的 flexbox 属性

Answer 1

你可以使用 flex-wrap 属性:

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

Answer 2

相应地更改 .imagebox {} 的 width

*{
    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>

Answer 3

Flexbox 不能很好地与 absolutely-positioned children 配合使用。通过将图像从正常流中取出，它们不再参与 flexbox 计算。剩余的 imagebox 元素不够宽，无法触发换行。

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.imagebox {
  flex: 0 0 calc((100% - 45px) / 4);
}

.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>

如何使 display:flex 项自动转到下一行？

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

html

css

flexbox

display