一旦元素在容器內的其他元素之間達到一定距離，如何讓flexbox元素包裝起來？

現在，我正在嘗試根據螢屏的大小使元素環繞，但不是僅在沒有空間容納每個元素及其硬編碼的所需寬度時才環繞，而是希望它在存在一定間隙時環繞每個物件之間。

我概述了它，以便更容易看到，但這通常是這樣的：

一旦我將螢屏調整到它仍然沒有包裹的程度，它就是它的樣子：

我如何使它在大盒子內所有物品之間的間隙達到這個大小時開始包裝：

這是我的 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;
    }
}

uj5u.com熱心網友回復：

您可以使用 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>

標籤：html css 弹性盒

上一篇：FullCalendar5中可以使用哪些css？

下一篇：如何洗掉導航欄中徽標和串列項之間的空間？