1

I'm making a mini calendar and using flexbox but how can I add a line break every 7 rows? At the moment all the boxes are just displayed in a single line.

I've tried by closing the <ul> every 7 rows which works but i'm going to be listing the data from a database so i was hoping there would be a better way to do a row break every 7 <li>.

Here is my code:

<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>

And CSS:

.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:100%;
  color: #000;
  text-align: center;
  min-height:120px;
  border:1px #d7d7d7 solid;

}
.number {
    text-align:left;
    font-weight: bold;
    border-bottom:1px #d7d7d7 dashed;
}

This is what i want it to look like

enter image description here

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Exoon
  • 1,513
  • 4
  • 20
  • 35
  • use CSS: `li:nth-of-type(7n){ ... }` – Martin Sep 15 '17 at 20:56
  • What would i put inside to break it? – Exoon Sep 15 '17 at 20:57
  • Possible duplicate of [How to display a list in two rows?](https://stackoverflow.com/questions/20570359/how-to-display-a-list-in-two-rows) – Martin Sep 15 '17 at 21:20
  • Honestly, I don't think there is a flexbox solution to your problem in the way you want it to work. Did you try to use `flex-wrap: wrap;` on the `ul` and set a corresponding width for the `li(s)` so they can list on 7 columns? – Marian Ioan Sep 15 '17 at 23:52

1 Answers1

4

Nothing too fancy here. On your container, you want to get rid of that nowrap class and add the wrap class.

With the container allowing wrapping, a simple calc expression on your flex items will do the trick:

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

I also added box-sizing: border-box to the flex items in the snippet below, since you have padding on them.

.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;
}
<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>

Note: I see you have the style .wrap li { background: gold } in your CSS, but the picture in your question of your desired output has them with a white background. So if you don't want the gold background, you can delete that rule; or overwrite it; or, instead of adding the wrap class to the container, just add flex-wrap: wrap in the other styles for the container in your CSS.

cjl750
  • 4,380
  • 3
  • 15
  • 27