如果在％

Question

我有一个Flex容器，其中5个项目设置为flex(1 1 20%)。每个项目具有相同的宽度（最初设置为具有20％的容器宽度）。一切都好。

.container {
    display: flex
    flex-wrap: wrap;
}

.item {
    flex: 1 1 20%;
}

我希望这些项目可以换行（请参阅http://jsfiddle.net/edag6amx/4/），但我无法在Safari或Chrome下使用它。适用于FF和Edge。

如果我将项目的flex-basis更改为auto（flex: 1 1 auto），它将按预期开始包装。

有什么建议吗？

感谢。

Answer 1

将flex-shrink设置为0

.container {
    display: flex
    flex-wrap: wrap;
}

.item {
    flex: 1 0 20%;
}