jquery - 如何在多行中设置 flexbox 子元素的样式

Question

我只想在 flex 元素进入下一行时设置高度，我该如何实现？

<div class="flex-container">
    <div class="flex-element">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="flex-element"> <!-- This is the element we want to conditionally style -->
        Second element
    </div>
</div>

CSS:

.flex-container {
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.flex-element {
     background-color: #cecece;
     margin: 1rem;
     text-align: center;
     padding: 0.5rem 1rem 0.5rem 1rem;
}

所以在这个虚拟示例中，我想将一些特定样式应用于第二个 flex 元素，但仅当它进入下一行时。

这可能吗？

Answer 1

不幸的是，这在 CSS 中不是可能的，无论是flexbox wrapping还是float wrapping - 你应该使用JS 而不是 - 请参阅下面的演示:

var flex_item_1 = $('.flex-container .flex-element').eq(0);
var flex_item_2 = $('.flex-container .flex-element').eq(1);

// detect wrapping
if(flex_item_2.offset().top > flex_item_1.offset().top + flex_item_1.outerHeight()) {
  // apply the required style here
  flex_item_2.css({'background-color' : '#0095FF'});
}

.flex-container {
  display: inline-flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}
.flex-element {
  background-color: #cecece;
  margin: 1rem;
  text-align: center;
  padding: 0.5rem 1rem 0.5rem 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="flex-container">
  <div class="flex-element">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="flex-element">
    <!-- This is the element we want to conditionally style -->
    Second element
  </div>
</div>

<br/><br/>
<div class="flex-container">
  <div class="flex-element" style="width:50%">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="flex-element">
    <!-- This is the element we want to conditionally style -->
    Second element
  </div>
</div>