jquery – 如何在多行中为flexbox子项设置样式

2024年1月9日 172次阅读

我想在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-element,但仅限于它进入下一行.

可能吗？

最佳答案 遗憾的是,无论是flexbox包装还是浮动包装,这都是不可能的 – 你应该使用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>
点赞