[解决方案-css] : 不管有几个child,都均分parent的宽度；如果只有一个，就100%

最新推荐文章于 2024-07-18 14:12:41 发布

有生之年～

最新推荐文章于 2024-07-18 14:12:41 发布

阅读量428

点赞数

分类专栏： demo css 文章标签： css html webview

本文链接：https://blog.csdn.net/weixin_38117216/article/details/121768776

版权

css 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

demo

10 篇文章 0 订阅

订阅专栏

<div class="parent">
    <span> 1 </span>
    <span> 2 </span>
</div>

<div class="parent">
    <span> 1 </span>
</div>

.parent {
    display: flex;
}
.parent > * {
    flex-basis: 100%;
}

默认，flex-wrap：nowrap； flex-shrink: 1; flex-grow: 0; 默认不换行，当宽度不够就缩放flex-item；当只有一个flex-item的时候，刚好100%占完parent的宽度；当flex-item > 1 ，由于各自flex-basis都是一样的100%，所以缩放后宽度还是一样。