如何使用html和css进行条件垂直换行？

<div class="container">
  <!-- 垂直换行的元素 -->
  <span>元素1</span>
  <span>元素2</span>
  <span>元素3</span>
  <span>元素4</span>
  <span>元素5</span>
  <span>元素6</span>
</div>

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

.container span {
  /* 设置元素的样式 */
  /* 例如：设置边距、背景颜色、字体样式等 */
  margin: 5px;
  padding: 10px;
  background-color: #f1f1f1;
  font-family: Arial, sans-serif;
}