javascript - CSS : Justify dynamically created divs with variable width inside parent

Question

我正在动态生成子 div 并将它们附加到父 div。每个子 div 都有不同的宽度。

  .parent{
    width:250px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .child{
      margin: 2px;
      float : left;
  }

<div class="parent">
    <div class="child" style="width:50px">1.2345</div>
    <div class="child" style="width:60px">1:234235</div>
    <div class="child" style="width:60px">1:234245</div>
    <div class="child" style="width:70px">1:23426565</div>
    <div class="child" style="width:30px">1:25</div>
    <div class="child" style="width:40px">1345</div>
    <div class="child" style="width:50px">1:23045</div>
    <div class="child" style="width:50px">1:23265</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:30px">1:45</div>
    <div class="child" style="width:40px">1:234</div>
    <div class="child" style="width:70px">1:23325545</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:60px">1:232545</div>
    <div class="child" style="width:60px">1:23425</div>
    <div class="child" style="width:50px">1:235</div>
    <div class="child" style="width:40px">1:25</div>
</div>

Fiddle(带有略有不同的标记和 CSS):https://jsfiddle.net/tgohguyj/

我如何在此处证明子 div 的合理性？

Answer 1

您可以在 parent 上使用 justify-content:space-between 样式

在这里阅读更多信息> justify-content

编辑:您可以使用 .parent .child:last-child { margin-right:auto } 所以如果最后一行只有 2 个元素，则最后元素将在前一个元素旁边对齐

见下文

.parent{
    width:250px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-between;
    
}
.parent .child:last-child {
  margin-right: auto;
}

.child{
    margin: 2px;
    border:1px solid red;
    box-sizing:border-box;
}

<div class="parent">
    <div class="child" style="width:50px">1.2345</div>
    <div class="child" style="width:60px">1:234235</div>
    <div class="child" style="width:60px">1:234245</div>
    <div class="child" style="width:70px">1:23426565</div>
    <div class="child" style="width:30px">1:25</div>
    <div class="child" style="width:40px">1345</div>
    <div class="child" style="width:50px">1:23045</div>
    <div class="child" style="width:50px">1:23265</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:30px">1:45</div>
    <div class="child" style="width:40px">1:234</div>
    <div class="child" style="width:70px">1:23325545</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:60px">1:232545</div>
    <div class="child" style="width:60px">1:23425</div>
    <div class="child" style="width:50px">1:235</div>
 
</div>

编辑 2: 您可以对 .parent 使用伪元素，它的行为类似于 .child，因此它将是一个 flex-child (您可以为其添加宽度或不添加宽度，具体取决于您希望最后一行看起来如何)

.parent{
    width:250px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-between;
    
}
.parent:after {
  content: '';
  width:50px;
}
.child{
    margin: 2px;
    border:1px solid red;
    box-sizing:border-box;
}

<div class="parent">
    <div class="child" style="width:50px">1.2345</div>
    <div class="child" style="width:60px">1:234235</div>
    <div class="child" style="width:60px">1:234245</div>
    <div class="child" style="width:70px">1:23426565</div>
    <div class="child" style="width:30px">1:25</div>
    <div class="child" style="width:40px">1345</div>
    <div class="child" style="width:50px">1:23045</div>
    <div class="child" style="width:50px">1:23265</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:30px">1:45</div>
    <div class="child" style="width:40px">1:234</div>
    <div class="child" style="width:70px">1:23325545</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:60px">1:232545</div>
    <div class="child" style="width:60px">1:23425</div>
    <div class="child" style="width:50px">1:235</div>
 
</div>