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

• Z时代
• 2024-01-10
• 分类：技术分享

代码结构如下：

<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宽度，隐藏超出的一个或多个子元素，然后没有隐藏的子元素两端对齐" title="两端对齐">两端对齐？

回答：

.tag {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    height:300px;
    overflow:hidden;
}
.tag-item {
    flex:0 0 300px;
    height:100%;
    background:red;
}

以上是 【CSS】根据div宽度，子元素自适应，两端对齐。 的全部内容， 来源链接： utcz.com/a/154030.html