flex 如何设置换行flex-wrap

flex 设置flex-wrap 换行

本来预想的正常情况下，代码应该如下：

ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      flex: 1;
      width: 25%;
}

但是这样的代码的宽度不生效，效果图如下

 后来发现，加上li 的最大宽度和最小宽度：

ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      flex: 1;
      width: 25%;
      min-width: 25%;
      max-width: 25%;
｝

这样，li 的宽度才能正常显示。