如何在多行中设置 flexbox 子项的样式答案

【问题标题】：How can I style flexbox children in a multiline如何在多行中设置 flexbox 子项的样式
【发布时间】：2017-04-13 15:27:57
【问题描述】：

我想只在 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 应用一些特定的样式，但仅限于它进入下一行时。

有可能吗？

【问题讨论】：

我不是 100% 确定，但恐怕这在 CSS 中是不可能的。
如果我没有正确理解你，你想要某种if{} 声明吗？目前这在 CSS 中是不可能的。为此，您必须使用 JavaScript。
能否不使用服务器端语言来测试第一个 div 的内容长度，如果内容足够长，则向第二个 div 添加一个类？ CSS 是一种样式语言，不应该用它来尝试做复杂的 if 语句
很遗憾，我不能为此使用任何服务器端逻辑。
如果您能够使用媒体查询来控制换行行为，那么您可以轻松设置元素在下一行中断时的高度，所有这些都使用 CSS。如果没有媒体查询，您将不得不求助于脚本，因为 CSS 不会在子容器包装时通知容器。有关详细信息，请参阅此答案：stackoverflow.com/a/37413580/3597276

标签： jquery html css flexbox

【解决方案1】：

不幸的是，无论是 flexbox wrapping 还是 float wrapping，这在 CSS 中不可能 - 你应该使用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>

【讨论】：