CSS Flexbox-选择位于换行符（换行）开头的每个项目

Question

css中是否有类似于自动换行选择器的东西？

我将CSS-Flexbox用于带有wrap选项的布局。

我不知道我事先有多少行 换行符（每次换行）伪选择器“之前”不应插入 内容。否则它应该插入一些内容。

这是我面临的问题的一个示例： 只需将此代码复制到JS-Fiddle中即可：

.items {
  background-color: yellow;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 400px;
}

.item {
  position: relative;
  padding: 0.25rem 0.5rem;
  display: block;
  border: 1px solid red;
}

.item:first-of-type:before {
  content: '';
}

.item:before {
  content: '\01F354';
}

<div class="items">
  <div class="item">
    item 1
  </div>
  <div class="item">
    item 2
  </div>
  <div class="item">
    item 3
  </div>
  <div class="item">
    item 4
  </div>
  <div class="item">
    item A
  </div>
  <div class="item">
    item B
  </div>
  <div class="item">
    item C
  </div>
  <div class="item">
    item D
  </div>
</div>

我的目标是在第一行的第二行中不要将其作为汉堡图标。

Answer 1

这可能有帮助

您可以设置项目的宽度和

使用 ：nth-​​child（）选择器并设置项目flex-basis：

但是最好使用JavaScript或从服务器端使用

在项目上添加title类以隐藏图标

.items {
  background-color: yellow;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 400px;
}

.item {
  position: relative;
  padding: 0.25rem 0.5rem;
  display: block;
  border: 1px solid red;
  flex-basis:75px;
}

.item:first-of-type:before {
  content: '';
}

.item:before {
  content: '\01F354';
}

.item:nth-child(4n+1):before {
  content: '';
}

<div class="items">
  <div class="item">
    item 1
  </div>
  <div class="item">
    item 2
  </div>
  <div class="item">
    item 3
  </div>
  <div class="item">
    item 4
  </div>
  <div class="item">
    item A
  </div>
  <div class="item">
    item B
  </div>
  <div class="item">
    item C
  </div>
  <div class="item">
    item D
  </div>
</div>