根据div宽度，子元素自适应，两端对齐。

Question

代码结构如下：

<div class="label">
    <ul class="tag">
        <li><i>子元素1</i></li>
        <li><i>子元素2</i></li>
        <li><i>子元素3</i></li>
        <li><i>子元素4</i></li>
    </ul>
</div>

想要实现的效果如下：

请教一下，如何实现：
如果所有子元素宽度大于div宽度，隐藏超出的一个或多个子元素，然后没有隐藏的子元素两端对齐？

Answer 1

.tag {

    display:flex;

    flex-wrap:wrap;

    justify-content:space-between;

    height:300px;

    overflow:hidden;

}

.tag-item {

    flex:0 0 300px;

    height:100%;

    background:red;
}