CSS设置div或li自适应列数显示

要求在在1300px的时候显示4个，出现横向滚动条

布局：html内

<div class="main-wrapper">
   <ul class="ul-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
   </ul>
</div>

css如下：

 

方法一：行内元素

.main-wrapper{
  overflow: auto;
}
.ul-list{
  width: 100%;
  font-size: 0;
  overflow: auto;
  li{
    width: 25%;
    min-width: 252px;
    display: inline-block;
    background: red;
    border:1px solid #ccc;
    font-size: 14px;
  }
}
@media (max-width:1300px){
  .ul-list{
    width: 1008px;
  }
}

 

方法二：弹性布局

.ul-list{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  li{
    width:25%;
    min-width: 252px;
    display: inline-block;
    background: red;
    border:1px solid #ccc;
    font-size: 14px;
  }
}
@media (max-width:1300px){
  .ul-list{
    width: 1008px;
  }
}

 

如需要再某个分辨率下显示多少列的话，可以用弹性盒模型+媒体查询 然后 li的宽度等于列数/100%;