flex-basis代替min/max-width效果实例页面

展示

此时容器宽度：480px

最小100px，总是填满容器最小100px，总是填满容器最小100px，总是填满容器最小100px，总是填满容器

代码

HTML：

<div class="container">
    <item>最小100px，总是填满容器</item>
    <item>最小100px，总是填满容器</item>
    <item>最小100px，总是填满容器</item>
    <item>最小100px，总是填满容器</item>
</div>

CSS：

.container {
    display: flex;
    flex-wrap: wrap;
}
.container item {
    flex-basis: 100px;
    flex-grow: 1;
}
.container item {
    padding: 1em;
    border: 1em solid deepskyblue;
    color: deepskyblue;
    outline: 1px dashed #fff;
    box-sizing: border-box;
}