如何排除 flexbox 包装中的第一项? [英] How to exclude the first item in a flexbox wrap?

问题描述

除了重新排序标记之外，有没有办法排除 flex wrap 中的第一项?

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

我已经试过了

:not(:first-child)

还有

:not(#tobeexcluded)

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

.view-id-reference_list .view-content:not(:first-child) {显示:弹性flex-flow: 包裹}

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

这是我想要的:https://jsfiddle.net/Lxhpwqzn/1/ 但没有更改标记.

解决方案

除了重新排序标记之外，有没有办法排除 flex wrap 中的第一项?

经过最初的一些混淆后，我们现在明白实际上需要的是内容在 第一个 div 之后包装起来.

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

.view-container .view-content {显示:弹性；flex-wrap: 包裹;对齐内容:间隔；}.filterbox {弹性:0 0 100%；}

<div class="view-content"><div class="filterbox">FILTER</div><div class="flex-item">弹性项目
<div class="flex-item">弹性项目

<div class="flex-item">弹性项目

Is there a way to exclude the first item in a flex wrap other than reorder the markup?

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

EDIT: I've tried now

:not(:first-child)

and also

:not(#tobeexcluded)

but it's not working. This is the actual class construction, it's a drupal view:

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

Fiddle: https://jsfiddle.net/m62090za/4/

Here's what i want: https://jsfiddle.net/Lxhpwqzn/1/ but without changing the markup.

解决方案

Is there a way to exclude the first item in a flex wrap other than reorder the markup?

After some initial confusion we now understand that what is actually required is for the content to wrap after the first div.

Obviously, the simplest method to achieve this is for the first div to be 100% wide of the parent.

.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>

这篇关于如何排除 flexbox 包装中的第一项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！