如何排除 flexbox 包装中的第一项？

Posted 2023-03-06

【中文标题】如何排除 flexbox 包装中的第一项？

【英文标题】：How to exclude the first item in a flexbox wrap?

【发布时间】：2016-07-27 23:20:02

【问题描述】：

除了重新排序标记之外，还有其他方法可以排除 flex wrap 中的第一项吗？

<div class="container">    
  <div id="tobeexcluded">abc</div>
  <div class="flexitem">content</div>
  <div class="flexitem">content</div>
  <div class="flexitem">content</div>
</div>

编辑： 我已经试过了

:not(:first-child)

还有

:not(#tobeexcluded)

但它不起作用。这是实际的类构造，它是一个 Drupal 视图：

.view-id-reference_list .view-content:not(:first-child) 
display: flex
flex-flow: wrap

小提琴：https://jsfiddle.net/m62090za/4/

这就是我想要的：https://jsfiddle.net/Lxhpwqzn/1/ 但不更改标记。

【问题讨论】：

css not:first-child selector的可能重复

你是认真的还是困倦的？这与您提供的链接完全不同

您可以使用 css #tobeexcluded display: none 排除它。

我不想隐藏它，它应该从 flexbox wrap 中移除。

正如您在小提琴中看到的，当我将 :not(:first-child) 添加到 div 时，flexbox wrap 不再起作用。 filter-div 应该在 flex-flow 之上...

【参考方案1】：

除了重新排序标记之外，还有其他方法可以排除 flex wrap 中的第一项吗？

经过一些初步的混淆，我们现在明白实际上需要将内容包装在 第一个 div 之后。

显然，实现这一点的最简单方法是让第一个 div 与父级 100% 宽。

.view-container .view-content 
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

.filterbox 
  flex: 0 0 100%;

<div class="view-container">
  <div class="view-content">
    <div class="filterbox">FILTER</div>
    <div class="flex-item">
      Flex-ITEM
    </div>
    <div class="flex-item">
      Flex-ITEM
    </div>
    <div class="flex-item">
      Flex-ITEM
    </div>
  </div>
</div>

【讨论】：

我读到这个，以为它不是我想要的（因为它很简单），关闭标签，意识到它的美丽，然后再次打开它。