怎么判断一个flex元素里面子元素是否换行了？

Question

在一个flex元素上通过限定高度，设置overflow:hidden做了一个展开收起的功能，怎么判断是否超出当前高度，怎么判断一个flex元素里面子元素是否换行了？

Answer 1

没必要去判断它是否换行，你甚至不用height去判断，换成max-height然后只要保证这个max-height始终大于真实height就行。

写了个例子给你：https://jsfiddle.net/7d3bzakg/

HTML代码：

<label for="toggle">切换</label>

<input id="toggle" type="checkbox">
<div id="container">
    <div class="item">box</div>
    <div class="item">box</div>
    <div class="item">box</div>
    <div class="item">box</div>
    <div class="item">box</div>
    <div class="item">box</div>
    <div class="item">box</div>
    <div class="item">box</div>
    <div class="item">box</div>
    <div class="item">box</div>
    <div class="item">box</div>
    <div class="item">box</div>
    <div class="item">box</div>
    <div class="item">box</div>
    <div class="item">box</div>
    <div class="item">box</div>
    <div class="item">box</div>
    <div class="item">box</div>
</div>

CSS代码：

#toggle {
    display: none;
}

#container {
    border: 1px solid #000;
    display: flex;
    flex-wrap: wrap;
    max-height: 50px;
    overflow: hidden;
    transition: max-height .5s;
    width: 400px;
}

#toggle:checked + #container {
    max-height: 300px /* 实际高度大概是 150px 到 200px */
}

.item {
    background-color: pink;
    height: 50px;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 50px;
}

Answer 2

http://hai.li/2017/03/08/css-...