flex 设置换行flex-wrap

flex 设置flex-wrap 换行

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

1 ul {
2     width: 100%;
3     display: flex;
4     flex-wrap: wrap;
5     li {
6       flex: 1;
7       width: 25%;
8 }

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

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

 1 ul {
 2     width: 100%;
 3     display: flex;
 4     flex-wrap: wrap;
 5     li {
 6       flex: 1;
 7       width: 25%;
 8       min-width: 25%;
 9       max-width: 25%;
10 ｝

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

 

转载于:https://www.cnblogs.com/mjbin/p/7461816.html