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

回到相关文章 »

效果：

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

代码：

CSS代码：
by-zhangxinxu {
    display: flex;
    flex-wrap: wrap;
}
item-zxx {
    padding: 1em;
    border: 1em solid deepskyblue;
    color: deepskyblue;
    outline: 1px dashed #fff;
    box-sizing: border-box;
    flex-basis: 100px;
    flex-grow: 1;
}
HTML代码：
<by-zhangxinxu>
    <item-zxx>最小100px，总是填满容器。</item-zxx>
    <item-zxx>最小100px，总是填满容器。</item-zxx>
    <item-zxx>最小100px，总是填满容器。</item-zxx>
    <item-zxx>最小100px，总是填满容器。</item-zxx>
</by-zhangxinxu>