CyclicBarrier是否会在最后等待时自行重置？(Does CyclicBarrier reset itself for the last await?)

 你不能使用Flexbox这样做，所以如果你不能使用脚本而你无法改变标记，你可以用float完成这个 
 
 
 
 
 
  
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  float: left;
  width: calc(33.333% - 10px);
  margin: 5px;
  height: 30px;
  background: lightgray;
}

/* for wider screens, such as desktop */
@media screen and (min-width: 768px) {
  li {
    width: calc(50% - 10px);
  }
}
 
  
Markup sample 1

<ul>
  <li></li>
  <li></li>
</ul>
<ul>
  <li></li>
</ul>
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

<div style="clear: both"></div>

Markup sample 2

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<ul>
</ul>
<ul>
  <li></li>
</ul>
 
 
 
 
 
 
 既然你明确说明你不能改变标记，但不能不使用脚本，这里就是一个 
 
 标记样本1 
 
 
 
 
 
  
(function() {
  window.addEventListener('load', function() {
    var uls = document.querySelectorAll('ul');
    for (var i = 1; i < uls.length; i++) {
      var lis = uls[i].querySelectorAll('li');
      for (var j = 0; j < lis.length; j++) {
        uls[0].appendChild(lis[j]);
      }
      uls[i].innerHTML = ''; // make them empty so CSS rule kicks in
    }
  });
})();
 
  
ul:empty {
  display: none;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  height: 30px;
  background: lightgray;
}


/* for wider screens, such as desktop */

@media screen and (min-width: 768px) {
  li {
    width: calc(50% - 10px);
  }
}
 
  
<ul>
  <li></li>
  <li></li>
</ul>
<ul>
  <li></li>
</ul>
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
 
 
 
 
 
 标记样本2 
 
 
 
 
 
  
(function() {
  window.addEventListener('load', function() {
    var uls = document.querySelectorAll('ul');
    for (var i = 1; i < uls.length; i++) {
      var lis = uls[i].querySelectorAll('li');
      for (var j = 0; j < lis.length; j++) {
        uls[0].appendChild(lis[j]);        
      }
      uls[i].innerHTML = ''; // make them empty so CSS rule kicks in
    }
  });
})();
 
  
ul:empty {
  display: none;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  height: 30px;
  background: lightgray;
}


/* for wider screens, such as desktop */

@media screen and (min-width: 768px) {
  li {
    width: calc(50% - 10px);
  }
}
 
  
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<ul>
</ul>
<ul>
  <li></li>
</ul>
 
 
 
 

You can't do that using Flexbox, so if you can't use a script and you can't change markup, you can accomplish this with float
 
 
 
 
 
  
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  float: left;
  width: calc(33.333% - 10px);
  margin: 5px;
  height: 30px;
  background: lightgray;
}

/* for wider screens, such as desktop */
@media screen and (min-width: 768px) {
  li {
    width: calc(50% - 10px);
  }
}
 
  
Markup sample 1

<ul>
  <li></li>
  <li></li>
</ul>
<ul>
  <li></li>
</ul>
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

<div style="clear: both"></div>

Markup sample 2

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<ul>
</ul>
<ul>
  <li></li>
</ul>
 
 
 
 
 
 
Since your clearly stated you can't change markup, but not not using script, here is one with that
 
Markup sample 1
 
 
 
 
 
  
(function() {
  window.addEventListener('load', function() {
    var uls = document.querySelectorAll('ul');
    for (var i = 1; i < uls.length; i++) {
      var lis = uls[i].querySelectorAll('li');
      for (var j = 0; j < lis.length; j++) {
        uls[0].appendChild(lis[j]);
      }
      uls[i].innerHTML = ''; // make them empty so CSS rule kicks in
    }
  });
})();
 
  
ul:empty {
  display: none;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  height: 30px;
  background: lightgray;
}


/* for wider screens, such as desktop */

@media screen and (min-width: 768px) {
  li {
    width: calc(50% - 10px);
  }
}
 
  
<ul>
  <li></li>
  <li></li>
</ul>
<ul>
  <li></li>
</ul>
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
 
 
 
 
 
Markup sample 2
 
 
 
 
 
  
(function() {
  window.addEventListener('load', function() {
    var uls = document.querySelectorAll('ul');
    for (var i = 1; i < uls.length; i++) {
      var lis = uls[i].querySelectorAll('li');
      for (var j = 0; j < lis.length; j++) {
        uls[0].appendChild(lis[j]);        
      }
      uls[i].innerHTML = ''; // make them empty so CSS rule kicks in
    }
  });
})();
 
  
ul:empty {
  display: none;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  height: 30px;
  background: lightgray;
}


/* for wider screens, such as desktop */

@media screen and (min-width: 768px) {
  li {
    width: calc(50% - 10px);
  }
}
 
  
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<ul>
</ul>
<ul>
  <li></li>
</ul>