如何应用CSS来弯曲特定行上的项目或弯曲已包装的项目? [英] How can I apply CSS to flex items on a certain row, or to flex items that have been wrapped?

问题描述

我有一个Flex div，其中包含五个绿色框.

flex div使用 flex-wrap:wrap; 在需要时将对象包装在内部.

The flex div is using flex-wrap: wrap; to wrap the objects inside when needed.

我希望所有包装好的物品都带有橙色边框:

I want all of the wrapped items to have an orange border:

我希望第三行中所有包裹的物品都是黄色而不是绿色.

And I want all wrapped items on the third row to be yellow instead of green.

推荐答案

AFAIK无法根据放置它​​们的包含块的哪一行来选择元素.因此，可能无法直接执行此操作.

AFAIK there is no way to select elements depending on which line of their containing block they are placed. So it may not be possible to do this directly.

但是，您可以伪造边框:

However, you can fake the borders:

#outer {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden; /* Hide additional borders after the last line */
}
#outer::after { /* Hide additional borders in the last line */
  content: '';
  background: #fff;
  flex-grow: 1;
}
.box {
  background-color: green;
  width: 50px;
  height: 30px;
  margin: 10px;
  position: relative;
}
.box::after { /* Fake border for the next line */
  content: '';
  position: absolute; /* Remove from the flow */
  top: 100%; /* Move downwards to the next line */
  margin-top: 20px; /* Move a bit more because .box have margin */
  outline: 3px solid #ffa500; /* Borders */
  width: 100%;
  height: 100%;
  z-index: -1;
}

<div id="outer">
  <div class="box"></div><div class="box"></div>
  <div class="box"></div><div class="box"></div>
  <div class="box"></div><div class="box"></div>
  <div class="box"></div><div class="box"></div>
  <div class="box"></div><div class="box"></div>
  <div class="box"></div><div class="box"></div>
</div>

这篇关于如何应用CSS来弯曲特定行上的项目或弯曲已包装的项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！