html - 如何让我的第二组盒子在第一个盒子下面移动

Question

请参阅下面的 HTML 和 CSS：

.nw-folder-icon-a {
  fill: #ffc92c;
}

.nw-folder-icon-b {
  fill: #ff9f00;
}

.nw-folder-icon-c {
  fill: #ffffff;
}

.ex-item {
    display: flex;
    align-items: center;
    border: 2px solid blue;
    width: 18%;
    border-radius: 10px;
    padding: 10px 20px;
}

.ex-title {
    font-weight: 600;
    width: calc(100% - 60px);
    margin-left: 10px;
}

.icon-folder-main {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

<div class="icon-folder-main">
  <div class="ex-item">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 50 50" width="50px" height="50" class="nw-folder-icon">
  <path class="nw-folder-icon-a" d="M47,11V38a4,4,0,0,1-4,4H7a4,4,0,0,1-4-4V11A2,2,0,0,1,5,9H45A2,2,0,0,1,47,11Z"/>
  <path class="nw-folder-icon-b" d="M45,8H5a3,3,0,0,0-3,3V38a5,5,0,0,0,5,5H43a5,5,0,0,0,5-5V11A3,3,0,0,0,45,8Zm1,23v7a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V27a3,3,0,0,1,3-3H26.13A5,5,0,0,0,30,22.21l1.78-2.13A3,3,0,0,1,34.07,19H43a3,3,0,0,1,3,3ZM42,15v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22H8V15a1,1,0,0,1,1-1H41A1,1,0,0,1,42,15Zm4,3a4.84,4.84,0,0,0-2-.93V15a3,3,0,0,0-3-3H9a3,3,0,0,0-3,3v7.1A4.84,4.84,0,0,0,4,23V11a1,1,0,0,1,1-1H45a1,1,0,0,1,1,1Z"/>
  <path class="nw-folder-icon-c" d="M26.13,22H8V15a1,1,0,0,1,1-1H41a1,1,0,0,1,1,1v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22Z"/></svg>
  <div class="ex-title">APECH</div>
</div>
  
    <div class="ex-item">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 50 50" width="50px" height="50" class="nw-folder-icon">
  <path class="nw-folder-icon-a" d="M47,11V38a4,4,0,0,1-4,4H7a4,4,0,0,1-4-4V11A2,2,0,0,1,5,9H45A2,2,0,0,1,47,11Z"/>
  <path class="nw-folder-icon-b" d="M45,8H5a3,3,0,0,0-3,3V38a5,5,0,0,0,5,5H43a5,5,0,0,0,5-5V11A3,3,0,0,0,45,8Zm1,23v7a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V27a3,3,0,0,1,3-3H26.13A5,5,0,0,0,30,22.21l1.78-2.13A3,3,0,0,1,34.07,19H43a3,3,0,0,1,3,3ZM42,15v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22H8V15a1,1,0,0,1,1-1H41A1,1,0,0,1,42,15Zm4,3a4.84,4.84,0,0,0-2-.93V15a3,3,0,0,0-3-3H9a3,3,0,0,0-3,3v7.1A4.84,4.84,0,0,0,4,23V11a1,1,0,0,1,1-1H45a1,1,0,0,1,1,1Z"/>
  <path class="nw-folder-icon-c" d="M26.13,22H8V15a1,1,0,0,1,1-1H41a1,1,0,0,1,1,1v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22Z"/></svg>
  <div class="ex-title">APECH</div>
</div>
  
    <div class="ex-item">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 50 50" width="50px" height="50" class="nw-folder-icon">
  <path class="nw-folder-icon-a" d="M47,11V38a4,4,0,0,1-4,4H7a4,4,0,0,1-4-4V11A2,2,0,0,1,5,9H45A2,2,0,0,1,47,11Z"/>
  <path class="nw-folder-icon-b" d="M45,8H5a3,3,0,0,0-3,3V38a5,5,0,0,0,5,5H43a5,5,0,0,0,5-5V11A3,3,0,0,0,45,8Zm1,23v7a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V27a3,3,0,0,1,3-3H26.13A5,5,0,0,0,30,22.21l1.78-2.13A3,3,0,0,1,34.07,19H43a3,3,0,0,1,3,3ZM42,15v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22H8V15a1,1,0,0,1,1-1H41A1,1,0,0,1,42,15Zm4,3a4.84,4.84,0,0,0-2-.93V15a3,3,0,0,0-3-3H9a3,3,0,0,0-3,3v7.1A4.84,4.84,0,0,0,4,23V11a1,1,0,0,1,1-1H45a1,1,0,0,1,1,1Z"/>
  <path class="nw-folder-icon-c" d="M26.13,22H8V15a1,1,0,0,1,1-1H41a1,1,0,0,1,1,1v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22Z"/></svg>
  <div class="ex-title">APECH</div>
</div>
  
    <div class="ex-item">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 50 50" width="50px" height="50" class="nw-folder-icon">
  <path class="nw-folder-icon-a" d="M47,11V38a4,4,0,0,1-4,4H7a4,4,0,0,1-4-4V11A2,2,0,0,1,5,9H45A2,2,0,0,1,47,11Z"/>
  <path class="nw-folder-icon-b" d="M45,8H5a3,3,0,0,0-3,3V38a5,5,0,0,0,5,5H43a5,5,0,0,0,5-5V11A3,3,0,0,0,45,8Zm1,23v7a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V27a3,3,0,0,1,3-3H26.13A5,5,0,0,0,30,22.21l1.78-2.13A3,3,0,0,1,34.07,19H43a3,3,0,0,1,3,3ZM42,15v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22H8V15a1,1,0,0,1,1-1H41A1,1,0,0,1,42,15Zm4,3a4.84,4.84,0,0,0-2-.93V15a3,3,0,0,0-3-3H9a3,3,0,0,0-3,3v7.1A4.84,4.84,0,0,0,4,23V11a1,1,0,0,1,1-1H45a1,1,0,0,1,1,1Z"/>
  <path class="nw-folder-icon-c" d="M26.13,22H8V15a1,1,0,0,1,1-1H41a1,1,0,0,1,1,1v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22Z"/></svg>
  <div class="ex-title">APECH</div>
</div>
  
    <div class="ex-item">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 50 50" width="50px" height="50" class="nw-folder-icon">
  <path class="nw-folder-icon-a" d="M47,11V38a4,4,0,0,1-4,4H7a4,4,0,0,1-4-4V11A2,2,0,0,1,5,9H45A2,2,0,0,1,47,11Z"/>
  <path class="nw-folder-icon-b" d="M45,8H5a3,3,0,0,0-3,3V38a5,5,0,0,0,5,5H43a5,5,0,0,0,5-5V11A3,3,0,0,0,45,8Zm1,23v7a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V27a3,3,0,0,1,3-3H26.13A5,5,0,0,0,30,22.21l1.78-2.13A3,3,0,0,1,34.07,19H43a3,3,0,0,1,3,3ZM42,15v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22H8V15a1,1,0,0,1,1-1H41A1,1,0,0,1,42,15Zm4,3a4.84,4.84,0,0,0-2-.93V15a3,3,0,0,0-3-3H9a3,3,0,0,0-3,3v7.1A4.84,4.84,0,0,0,4,23V11a1,1,0,0,1,1-1H45a1,1,0,0,1,1,1Z"/>
  <path class="nw-folder-icon-c" d="M26.13,22H8V15a1,1,0,0,1,1-1H41a1,1,0,0,1,1,1v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22Z"/></svg>
  <div class="ex-title">This folder should be on the left side<----</div>
</div>
</div>

大家好，只是问你可以看到第二组的盒子是居中的，因为我justify-content: center;在我的主容器上使用了.icon-folder-main。我的目标是，如果盒子进入第二组，它应该在第一个盒子下面。我尝试使用 `flex-start 仍然无法正常工作。任何人都可以帮助我以正确的方式实现它吗？

score 0 · Accepted Answer

0

justify-content:space-between;

于 2021-10-16T07:05:30.190 回答

html - 如何让我的第二组盒子在第一个盒子下面移动

1 回答 1

Related

Reference