如何使用flexbox每7行获得换行符？

Question

我正在制作迷你日历并使用flexbox但是如何每隔7行添加换行符？目前，所有方框都只显示在一行中。

我已经试过关闭{7}每7行有效，但我将列出数据库中的数据，所以我希望有更好的方法来每隔7行进行一次划分。 <ul>。

这是我的代码：

<li>

和CSS：

<ul class="flex-container nowrap">
  <li class="flex-item"><div class="number">1</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">2</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">3</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">4</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">5</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">6</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">7</div>O<br />P<br />PM</li>

  <li class="flex-item"><div class="number">8</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">9</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">10</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">11</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">12</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">13</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">14</div>O<br />P<br />PM</li>

  <li class="flex-item"><div class="number">15</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">16</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">17</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">18</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">19</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">20</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">21</div>O<br />P<br />PM</li>

  <li class="flex-item"><div class="number">22</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">23</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">24</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">25</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">26</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">27</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">28</div>O<br />P<br />PM</li>

  <li class="flex-item"><div class="number">29</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">30</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">31</div>O<br />P<br />PM</li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>

</ul>

这就是我希望它看起来像

Answer 1

这里没什么特别的。在容器上，您希望删除nowrap类并添加wrap类。

在容器允许换行的情况下，flex项目上的简单calc表达式可以解决这个问题：

li.flex-item {
  width: calc(100% / 7);
}

我还在下面的代码段中的flex项目中添加了box-sizing: border-box，因为你已经填充了它们。

＆＃13;

＆＃13;

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}
.nowrap  { 
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.wrap    { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.wrap li {
  background: gold;
}
.wrap-reverse         { 
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
.wrap-reverse li {
  background: deepskyblue;
}
.flex-item {
  background: #ffffff;
  padding: 5px;
  width: calc(100% / 7);
  box-sizing: border-box;
  color: #000;
  text-align: center;
  min-height:120px;
  border:1px #d7d7d7 solid;
}
.number {
    text-align:left;
    font-weight: bold;
    border-bottom:1px #d7d7d7 dashed;
}

＆＃13;

<ul class="flex-container wrap">
  <li class="flex-item"><div class="number">1</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">2</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">3</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">4</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">5</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">6</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">7</div>O<br />P<br />PM</li>

  <li class="flex-item"><div class="number">8</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">9</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">10</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">11</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">12</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">13</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">14</div>O<br />P<br />PM</li>

  <li class="flex-item"><div class="number">15</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">16</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">17</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">18</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">19</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">20</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">21</div>O<br />P<br />PM</li>

  <li class="flex-item"><div class="number">22</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">23</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">24</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">25</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">26</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">27</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">28</div>O<br />P<br />PM</li>

  <li class="flex-item"><div class="number">29</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">30</div>O<br />P<br />PM</li>
  <li class="flex-item"><div class="number">31</div>O<br />P<br />PM</li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>

</ul>

＆＃13;

＆＃13;

＆＃13;

注意：我看到你的CSS中有样式.wrap li { background: gold }，但是你想要的输出问题中的图片带有白色背景。因此，如果您不想要黄金背景，则可以删除该规则;或覆盖它;或者，而不是将wrap类添加到容器中，只需在CSS中的容器的其他样式中添加flex-wrap: wrap。