html - flexbox 从 nowrap 中排除最后一项

Question

我已经在我的容器上设置了 flexbox nowrap。在特定宽度下，使用媒体查询，我想将容器中的最后一项(第 3 项)插入新行，这样它就不会影响容器中的 flex 元素。如果没有 javascript，这可以用 css 实现吗？如有必要，我可以使用一些额外的 html 标记。

注意:容器中可能有超过 3 个元素，这只是 3 个元素的示例。

.container {
  display: flex;
  flex-flow: nowrap;
  justify-content: space-between;
}

@media (max-width: 700px) {
  
}

<div class="container">

  <div class="flex-item">
    ITEM 1
  </div>
  <div class="flex-item">
    ITEM 2
  </div>
  <div class="flex-item">
    ITEM 3
  </div>

</div>

Answer 1

使用现有标记，并在使用 nowrap 时, 排除给定宽度的最后一项的唯一方法是使其成为 position: absolute .

另一方面，这需要一个脚本来调整 container的高度，以防止标记中后面的元素最终位于其下方(定位的元素)。

.flex-parent {
  position: relative;
  display: flex;
  justify-content: space-between;
}

@media (max-width: 700px) {
  .flex-item:last-child {
    position: absolute;
    left: 0;
    top: 100%;
  }  
}


/* just for this demo, to create space between "container"'s */
.container + .container {
  margin-top: 30px;
}

<div class="container flex-parent">
  <div class="flex-item">
    ITEM 1
  </div>
  <div class="flex-item">
    ITEM 2
  </div>
  <div class="flex-item">
    ITEM 3
  </div>
  <div class="flex-item">
    ITEM Last
  </div>
</div>
<div class="container flex-parent">
  <div class="flex-item">
    ITEM 1
  </div>
  <div class="flex-item">
    ITEM 2
  </div>
  <div class="flex-item">
    ITEM 3
  </div>
  <div class="flex-item">
    ITEM 4
  </div>
  <div class="flex-item">
    ITEM 5
  </div>
  <div class="flex-item">
    ITEM Last
  </div>
</div>
<div class="container flex-parent">
  <div class="flex-item">
    ITEM 1
  </div>
  <div class="flex-item">
    ITEM 2
  </div>
  <div class="flex-item">
    ITEM Last
  </div>
</div>

允许标记更改，实现此目的的一种解决方案是将除最后一项以外的所有项都包装在它们自己的父项中，然后切换 flex-direction与您的媒体查询。

为了使 space-between 在两种情况下(包裹/不包裹)都有效，我使用了 pseudo元素，结合制作内部flex-parent使用 flex: 1 填充剩余空间

堆栈片段

.flex-parent {
  display: flex;
  justify-content: space-between;
}
.container .flex-parent {
  flex: 1;
}
.container .flex-parent::after {
  content: '';
}  

@media (max-width: 700px) {
  .container.flex-parent {
    flex-direction: column;
  }  
  .container .flex-parent::after {
    display: none;
  }  
}


/* just for this demo, to create space between "container"'s */
.container + .container {
  margin-top: 30px;
}

<div class="container flex-parent">
  <div class="flex-item flex-parent">
    <div class="flex-item">
      ITEM 1
    </div>
    <div class="flex-item">
      ITEM 2
    </div>
    <div class="flex-item">
      ITEM 3
    </div>
  </div>  
  <div class="flex-item">
    ITEM Last
  </div>
</div>
<div class="container flex-parent">
  <div class="flex-item flex-parent">
    <div class="flex-item">
      ITEM 1
    </div>
    <div class="flex-item">
      ITEM 2
    </div>
    <div class="flex-item">
      ITEM 3
    </div>
    <div class="flex-item">
      ITEM 4
    </div>
    <div class="flex-item">
      ITEM 5
    </div>
  </div>  
  <div class="flex-item">
    ITEM Last
  </div>
</div>
<div class="container flex-parent">
  <div class="flex-item flex-parent">
    <div class="flex-item">
      ITEM 1
    </div>
    <div class="flex-item">
      ITEM 2
    </div>
  </div>  
  <div class="flex-item">
    ITEM Last
  </div>
</div>