一旦元素在容器内的其他元素之间达到一定距离，如何让 flexbox 元素换行？答案

【问题标题】：How do I get flexbox elements to wrap once the elements reach a certain distance between the other elements inside of a container?一旦元素在容器内的其他元素之间达到一定距离，如何让 flexbox 元素换行？
【发布时间】：2022-01-01 04:15:50
【问题描述】：

现在我正在尝试根据屏幕大小使元素换行，而不是仅在没有空间容纳每个元素及其硬编码的所需宽度时才换行，我希望它在有时换行每个对象之间有一定的间隙。

我概述了它以便更容易看到，但这就是它通常的样子：

一旦我将屏幕大小调整到它仍然没有换行的程度，这就是它的样子：

如何让它在大盒子内的所有物品之间的间隙达到这个大小时开始包裹：

这是我的 HTML 代码：

             <div class="profiles-sec">
                 <div className="profile">
                    <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" className="profile-img"></img>
                    <h3 className="user-name">t</h3>
                    <h5>Founder</h5>
                    <p>Description</p>
                </div>
                <div className="profile">
                    <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" className="profile-img"></img>
                    <h3 className="user-name">t</h3>
                    <h5>Founder</h5>
                    <p>Description</p>
                </div>
                <div className="profile">
                    <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" className="profile-img"></img>
                    <h3 className="user-name">t</h3>
                    <h5>Co-Founder</h5>
                    <p>Description</p>
                </div>
                <div className="profile">
                    <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" className="profile-img"></img>
                    <h3 className="user-name">t</h3>
                    <h5>Co-Founder</h5>
                    <p>Description</p>
                </div>
         </div>

这是我的 CSS 代码：

.profiles-sec {
    display: flex;
    justify-content: space-around;
    margin: 80px 80px;
    border: solid 1px black;
    flex-wrap: wrap;
}

.profile {
    flex-basis: 400;
    border: solid 1px black;
}


@media only screen and (max-width: 1500px) {
    
    .profile {
        display: flex;
        flex-direction: column;
        align-items: center;

    }

    .profile p {
        text-align: center;
        margin: 20px 60px 80px 60px;
        font-size: 20px;
    }
}

【问题讨论】：

flex-basis: 400; 需要测量...例如px
但是你必须设置一个边距值.....
...失去space-around，你可以选择其中的一个，不能同时拥有
stackoverflow.com/questions/38078957/…

标签： html css flexbox

【解决方案1】：

您可以使用 flexbox 的 gap 属性来让 flex-wrap 在您定义的值处中断。在此示例中，我将间隙值设置为 30px。一旦配置文件之间正好有 30 像素，这允许配置文件换行。

.profiles-sec {
  display: flex;
  gap: 30px;
  justify-content: space-around;
  margin: 80px 80px;
  border: solid 1px black;
  flex-wrap: wrap;
}

.profile {
  flex-basis: 400px;
  border: solid 1px black;
}

.profile img {
  width: 100%;
}

@media only screen and (max-width: 1500px) {
  .profile {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .profile p {
    text-align: center;
    margin: 20px 60px 80px 60px;
    font-size: 20px;
  }
}

<div class="profiles-sec">
  <div class="profile">
    <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" className="profile-img"></img>
    <h3 class="user-name">t</h3>
    <h5>Founder</h5>
    <p>Description</p>
  </div>
  <div class="profile">
    <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="profile-img"></img>
    <h3 class="user-name">t</h3>
    <h5>Founder</h5>
    <p>Description</p>
  </div>
  <div class="profile">
    <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="profile-img"></img>
    <h3 class="user-name">t</h3>
    <h5>Co-Founder</h5>
    <p>Description</p>
  </div>
  <div class="profile">
    <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="profile-img"></img>
    <h3 class="user-name">t</h3>
    <h5>Co-Founder</h5>
    <p>Description</p>
  </div>
</div>

【讨论】：