如何使 display:flex 项目自动转到下一行？ [复制]

Posted 2023-02-21

【中文标题】如何使 display:flex 项目自动转到下一行？ [复制]

【英文标题】：How to make display:flex items go to the next line, automatically? [duplicate]

【发布时间】：2022-01-15 01:01:29

【问题描述】：

所以对学习/使用“display: 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 属性

【问题讨论】：

您在寻找the flex-wrap property吗？

看到这个w3schools.com/css/tryit.asp?filename=trycss3_flexbox

@Dlk 不，它不能解决，如果我继续添加更多的框，比如直到 12，最终它会消失，我想要的是不适合的 div 自动继续到下一行

@OishikSengupta 可能是因为您将 position:absolute 与 Flexbox 混合使用。 flex 中的项目不够宽，无法触发换行，并且绝对定位的图像不参与 flexbox 计算。 Flexbox and absolute positioning

@Richard 认为是的，我想通了，谢谢。

【参考方案1】：

相应地更改.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>

【参考方案2】：

你可以使用 flex-wrap 属性：

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

【参考方案3】：

Flexbox 不适合绝对定位的孩子。通过将图像从正常流程中取出，它们不再参与 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>