How do I make this flex box CSS gap even? - Html

hendry
March 29, 2023
125 views
4 votes
4 Answers

I don’t think I want to see CSS grid since I want it to flex to multi columns if the viewport widens, for example Portrait -> Landscape on a mobile device.

This is the problem:

(()=>{function m(n,a){if(n){var r=a/1e3;Math.abs(r)>60?n.innerHTML=parseInt(r/60)+"m":n.innerHTML=parseInt(r)+"s",setTimeout(m,1e3,n,a-1e3)}}window.addEventListener("load",function(){var n=document.getElementsByTagName("time"),a=new Date;for(let e=0;e<n.length;e++){var r=new Date(n[e].getAttribute("datetime")),v=r.getTime()-a.getTime();m(n[e],v)}var p=document.getElementById("lastupdated");m(p,Date.now()-a);var t=JSON.parse(window.localStorage.getItem("history"))||{},o=document.getElementById("id").value,l=document.getElementById("namedBusStop")?.innerHTML||"";if(console.log("DEBUG",o,l),o){typeof t[o]>"u"&&(t[o]={},t[o].count=0,t[o].name=l);try{t[o].count++,t[o].name=l}catch(e){console.log(e)}window.localStorage.setItem("history",JSON.stringify(t))}else navigator.geolocation&&navigator.geolocation.getCurrentPosition(function(e){var u=e.coords.latitude,w=e.coords.longitude;window.location="/closest?lat="+u+"&lng="+w});var d=[];for(var g in t)d.push([g,t[g]]);d.sort(function(e,u){return e[1].count-u[1].count});var h=document.getElementById("stations");for(let e=d.length-1;e>=0;e--){var s=d[e][0],c=d[e][1],f=document.createElement("li"),i=document.createElement("a");c.name?(i.setAttribute("href","/?id="+s+"&name="+encodeURI(c.name)),i.appendChild(document.createTextNode(s+" "+c.name+" ("+c.count+")"))):(i.setAttribute("href","/?id="+s),i.appendChild(document.createTextNode(s))),f.appendChild(i),h.appendChild(f)}},!1);})();

.buses li:before {
  content: "1F68C";
  padding-left: 20px;
  padding-right: 8px;
  overflow: hidden;
}

ul.buses {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

<ul class=buses>

    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/155'>155</a>
        </strong>

        <time dateTime="2023-03-19T20:19:31+08:00">2023-03-19T20:19:31+08:00</time>
        <time dateTime="2023-03-19T20:37:34+08:00">2023-03-19T20:37:34+08:00</time>
        <time dateTime="2023-03-19T20:50:38+08:00">2023-03-19T20:50:38+08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/24'>24</a>
        </strong>

        <time dateTime="2023-03-19T20:19:55+08:00">2023-03-19T20:19:55+08:00</time>
        <time dateTime="2023-03-19T20:53:17+08:00">2023-03-19T20:53:17+08:00</time>
        <time dateTime="2023-03-19T20:54:15+08:00">2023-03-19T20:54:15+08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/21'>21</a>
        </strong>

        <time dateTime="2023-03-19T20:20:44+08:00">2023-03-19T20:20:44+08:00</time>
        <time dateTime="2023-03-19T20:35:07+08:00">2023-03-19T20:35:07+08:00</time>
        <time dateTime="2023-03-19T20:49:38+08:00">2023-03-19T20:49:38+08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/13'>13</a>
        </strong>

        <time dateTime="2023-03-19T20:20:48+08:00">2023-03-19T20:20:48+08:00</time>
        <time dateTime="2023-03-19T20:30:31+08:00">2023-03-19T20:30:31+08:00</time>
        <time dateTime="2023-03-19T20:45:41+08:00">2023-03-19T20:45:41+08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/67'>67</a>
        </strong>

        <time dateTime="2023-03-19T20:22:24+08:00">2023-03-19T20:22:24+08:00</time>
        <time dateTime="2023-03-19T20:25:35+08:00">2023-03-19T20:25:35+08:00</time>
        <time dateTime="2023-03-19T20:27:59+08:00">2023-03-19T20:27:59+08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/7'>7</a>
        </strong>

        <time dateTime="2023-03-19T20:22:26+08:00">2023-03-19T20:22:26+08:00</time>
        <time dateTime="2023-03-19T20:31:30+08:00">2023-03-19T20:31:30+08:00</time>
        <time dateTime="2023-03-19T20:45:46+08:00">2023-03-19T20:45:46+08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/28'>28</a>
        </strong>

        <time dateTime="2023-03-19T20:22:48+08:00">2023-03-19T20:22:48+08:00</time>
        <time dateTime="2023-03-19T20:38:45+08:00">2023-03-19T20:38:45+08:00</time>
        <time dateTime="2023-03-19T20:50:09+08:00">2023-03-19T20:50:09+08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/30'>30</a>
        </strong>

        <time dateTime="2023-03-19T20:25:57+08:00">2023-03-19T20:25:57+08:00</time>
        <time dateTime="2023-03-19T20:38:32+08:00">2023-03-19T20:38:32+08:00</time>
        <time dateTime="2023-03-19T20:53:32+08:00">2023-03-19T20:53:32+08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/93'>93</a>
        </strong>

        <time dateTime="2023-03-19T20:27:43+08:00">2023-03-19T20:27:43+08:00</time>
        <time dateTime="2023-03-19T20:55:32+08:00">2023-03-19T20:55:32+08:00</time>

    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/2'>2</a>
        </strong>

        <time dateTime="2023-03-19T20:30:14+08:00">2023-03-19T20:30:14+08:00</time>
        <time dateTime="2023-03-19T20:39:08+08:00">2023-03-19T20:39:08+08:00</time>
        <time dateTime="2023-03-19T20:39:16+08:00">2023-03-19T20:39:16+08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/51'>51</a>
        </strong>

        <time dateTime="2023-03-19T20:30:19+08:00">2023-03-19T20:30:19+08:00</time>
        <time dateTime="2023-03-19T20:36:15+08:00">2023-03-19T20:36:15+08:00</time>
        <time dateTime="2023-03-19T20:44:24+08:00">2023-03-19T20:44:24+08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/150'>150</a>
        </strong>

        <time dateTime="2023-03-19T20:30:40+08:00">2023-03-19T20:30:40+08:00</time>
        <time dateTime="2023-03-19T20:50:54+08:00">2023-03-19T20:50:54+08:00</time>

    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/60'>60</a>
        </strong>

        <time dateTime="2023-03-19T20:31:03+08:00">2023-03-19T20:31:03+08:00</time>
        <time dateTime="2023-03-19T20:42:10+08:00">2023-03-19T20:42:10+08:00</time>
        <time dateTime="2023-03-19T20:57:53+08:00">2023-03-19T20:57:53+08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/26'>26</a>
        </strong>

        <time dateTime="2023-03-19T20:31:06+08:00">2023-03-19T20:31:06+08:00</time>
        <time dateTime="2023-03-19T20:42:32+08:00">2023-03-19T20:42:32+08:00</time>
        <time dateTime="2023-03-19T20:56:32+08:00">2023-03-19T20:56:32+08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/63'>63</a>
        </strong>

        <time dateTime="2023-03-19T20:32:56+08:00">2023-03-19T20:32:56+08:00</time>
        <time dateTime="2023-03-19T20:43:32+08:00">2023-03-19T20:43:32+08:00</time>
        <time dateTime="2023-03-19T20:59:15+08:00">2023-03-19T20:59:15+08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/61'>61</a>
        </strong>

        <time dateTime="2023-03-19T20:35:28+08:00">2023-03-19T20:35:28+08:00</time>
        <time dateTime="2023-03-19T20:43:51+08:00">2023-03-19T20:43:51+08:00</time>
        <time dateTime="2023-03-19T20:55:03+08:00">2023-03-19T20:55:03+08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/63M'>63M</a>
        </strong>

        <time dateTime="2023-03-19T20:36:45+08:00">2023-03-19T20:36:45+08:00</time>
        <time dateTime="2023-03-19T20:43:03+08:00">2023-03-19T20:43:03+08:00</time>
        <time dateTime="2023-03-19T20:51:48+08:00">2023-03-19T20:51:48+08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/22'>22</a>
        </strong>

        <time dateTime="2023-03-19T20:37:51+08:00">2023-03-19T20:37:51+08:00</time>
        <time dateTime="2023-03-19T20:58:13+08:00">2023-03-19T20:58:13+08:00</time>
    </li>
</ul>

<p>Hint: Tap <a style="text-decoration: none;" href="/">🚏</a> to find closest bus stop</p>

<h4>Last updated: <span id=lastupdated></span></h4>

Answers

Try width:50%; for li tag like this:

.buses li:before {
  content: "1F68C";
  padding-left: 20px;
  padding-right: 8px;
  overflow: hidden;
}

ul.buses {
    list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

li {
  width: 50%;
}

<script src="https://bus.dabase.com/static/main.js"></script>
    <ul class=buses>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/155'>155</a>
            </strong>

            <time dateTime="2023-03-19T20:19:31&#43;08:00">2023-03-19T20:19:31&#43;08:00</time>
            <time dateTime="2023-03-19T20:37:34&#43;08:00">2023-03-19T20:37:34&#43;08:00</time>
            <time dateTime="2023-03-19T20:50:38&#43;08:00">2023-03-19T20:50:38&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/24'>24</a>
            </strong>

            <time dateTime="2023-03-19T20:19:55&#43;08:00">2023-03-19T20:19:55&#43;08:00</time>
            <time dateTime="2023-03-19T20:53:17&#43;08:00">2023-03-19T20:53:17&#43;08:00</time>
            <time dateTime="2023-03-19T20:54:15&#43;08:00">2023-03-19T20:54:15&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/21'>21</a>
            </strong>

            <time dateTime="2023-03-19T20:20:44&#43;08:00">2023-03-19T20:20:44&#43;08:00</time>
            <time dateTime="2023-03-19T20:35:07&#43;08:00">2023-03-19T20:35:07&#43;08:00</time>
            <time dateTime="2023-03-19T20:49:38&#43;08:00">2023-03-19T20:49:38&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/13'>13</a>
            </strong>

            <time dateTime="2023-03-19T20:20:48&#43;08:00">2023-03-19T20:20:48&#43;08:00</time>
            <time dateTime="2023-03-19T20:30:31&#43;08:00">2023-03-19T20:30:31&#43;08:00</time>
            <time dateTime="2023-03-19T20:45:41&#43;08:00">2023-03-19T20:45:41&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/67'>67</a>
            </strong>

            <time dateTime="2023-03-19T20:22:24&#43;08:00">2023-03-19T20:22:24&#43;08:00</time>
            <time dateTime="2023-03-19T20:25:35&#43;08:00">2023-03-19T20:25:35&#43;08:00</time>
            <time dateTime="2023-03-19T20:27:59&#43;08:00">2023-03-19T20:27:59&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/7'>7</a>
            </strong>

            <time dateTime="2023-03-19T20:22:26&#43;08:00">2023-03-19T20:22:26&#43;08:00</time>
            <time dateTime="2023-03-19T20:31:30&#43;08:00">2023-03-19T20:31:30&#43;08:00</time>
            <time dateTime="2023-03-19T20:45:46&#43;08:00">2023-03-19T20:45:46&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/28'>28</a>
            </strong>

            <time dateTime="2023-03-19T20:22:48&#43;08:00">2023-03-19T20:22:48&#43;08:00</time>
            <time dateTime="2023-03-19T20:38:45&#43;08:00">2023-03-19T20:38:45&#43;08:00</time>
            <time dateTime="2023-03-19T20:50:09&#43;08:00">2023-03-19T20:50:09&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/30'>30</a>
            </strong>

            <time dateTime="2023-03-19T20:25:57&#43;08:00">2023-03-19T20:25:57&#43;08:00</time>
            <time dateTime="2023-03-19T20:38:32&#43;08:00">2023-03-19T20:38:32&#43;08:00</time>
            <time dateTime="2023-03-19T20:53:32&#43;08:00">2023-03-19T20:53:32&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/93'>93</a>
            </strong>

            <time dateTime="2023-03-19T20:27:43&#43;08:00">2023-03-19T20:27:43&#43;08:00</time>
            <time dateTime="2023-03-19T20:55:32&#43;08:00">2023-03-19T20:55:32&#43;08:00</time>
            

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/2'>2</a>
            </strong>

            <time dateTime="2023-03-19T20:30:14&#43;08:00">2023-03-19T20:30:14&#43;08:00</time>
            <time dateTime="2023-03-19T20:39:08&#43;08:00">2023-03-19T20:39:08&#43;08:00</time>
            <time dateTime="2023-03-19T20:39:16&#43;08:00">2023-03-19T20:39:16&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/51'>51</a>
            </strong>

            <time dateTime="2023-03-19T20:30:19&#43;08:00">2023-03-19T20:30:19&#43;08:00</time>
            <time dateTime="2023-03-19T20:36:15&#43;08:00">2023-03-19T20:36:15&#43;08:00</time>
            <time dateTime="2023-03-19T20:44:24&#43;08:00">2023-03-19T20:44:24&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/150'>150</a>
            </strong>

            <time dateTime="2023-03-19T20:30:40&#43;08:00">2023-03-19T20:30:40&#43;08:00</time>
            <time dateTime="2023-03-19T20:50:54&#43;08:00">2023-03-19T20:50:54&#43;08:00</time>
            

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/60'>60</a>
            </strong>

            <time dateTime="2023-03-19T20:31:03&#43;08:00">2023-03-19T20:31:03&#43;08:00</time>
            <time dateTime="2023-03-19T20:42:10&#43;08:00">2023-03-19T20:42:10&#43;08:00</time>
            <time dateTime="2023-03-19T20:57:53&#43;08:00">2023-03-19T20:57:53&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/26'>26</a>
            </strong>

            <time dateTime="2023-03-19T20:31:06&#43;08:00">2023-03-19T20:31:06&#43;08:00</time>
            <time dateTime="2023-03-19T20:42:32&#43;08:00">2023-03-19T20:42:32&#43;08:00</time>
            <time dateTime="2023-03-19T20:56:32&#43;08:00">2023-03-19T20:56:32&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/63'>63</a>
            </strong>

            <time dateTime="2023-03-19T20:32:56&#43;08:00">2023-03-19T20:32:56&#43;08:00</time>
            <time dateTime="2023-03-19T20:43:32&#43;08:00">2023-03-19T20:43:32&#43;08:00</time>
            <time dateTime="2023-03-19T20:59:15&#43;08:00">2023-03-19T20:59:15&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/61'>61</a>
            </strong>

            <time dateTime="2023-03-19T20:35:28&#43;08:00">2023-03-19T20:35:28&#43;08:00</time>
            <time dateTime="2023-03-19T20:43:51&#43;08:00">2023-03-19T20:43:51&#43;08:00</time>
            <time dateTime="2023-03-19T20:55:03&#43;08:00">2023-03-19T20:55:03&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/63M'>63M</a>
            </strong>

            <time dateTime="2023-03-19T20:36:45&#43;08:00">2023-03-19T20:36:45&#43;08:00</time>
            <time dateTime="2023-03-19T20:43:03&#43;08:00">2023-03-19T20:43:03&#43;08:00</time>
            <time dateTime="2023-03-19T20:51:48&#43;08:00">2023-03-19T20:51:48&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/22'>22</a>
            </strong>

            <time dateTime="2023-03-19T20:37:51&#43;08:00">2023-03-19T20:37:51&#43;08:00</time>
            <time dateTime="2023-03-19T20:58:13&#43;08:00">2023-03-19T20:58:13&#43;08:00</time>
            

        </li>
        
    </ul>

    <p>Hint: Tap <a style="text-decoration: none;" href="/">🚏</a> to find closest bus stop</p>

    <h4>Last updated: <span id=lastupdated></span></h4>

It seems that you are trying to prevent li elements from wrapping while fitting as many as possible on the same row. If that’s the case, you can hard-code a max limit for your li:

li {
  width: max(300px, 20%);
  white-space: nowrap;
}

Try it:

/* Avoid loading external resources */
document.querySelectorAll('.time').forEach(e => {
  e.textContent = `-${14500 + Math.random() * 100 | 0}m`;
});

.buses li:before {
  content: "1F68C";
  padding-left: 20px;
  padding-right: 8px;
  overflow: hidden;
}

ul.buses {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

li {
  width: max(300px, 20%);
  white-space: nowrap;
}

<ul class="buses">
  <li>
    <strong>
            <a href="javascript:void(0)">155</a>
        </strong>

    <span class="time"></span>
    <span class="time"></span>
    <span class="time"></span>
  </li>

  <li>
    <strong>
            <a href="javascript:void(0)">24</a>
        </strong>

    <span class="time"></span>
    <span class="time"></span>
    <span class="time"></span>
  </li>

  <li>
    <strong>
            <a href="javascript:void(0)">21</a>
        </strong>

    <span class="time"></span>
    <span class="time"></span>
    <span class="time"></span>
  </li>

  <li>
    <strong>
            <a href="javascript:void(0)">13</a>
        </strong>

    <span class="time"></span>
    <span class="time"></span>
    <span class="time"></span>
  </li>

  <li>
    <strong>
            <a href="javascript:void(0)">67</a>
        </strong>

    <span class="time"></span>
    <span class="time"></span>
    <span class="time"></span>
  </li>

  <li>
    <strong>
            <a href="javascript:void(0)">7</a>
        </strong>

    <span class="time"></span>
    <span class="time"></span>
    <span class="time"></span>
  </li>

  <li>
    <strong>
            <a href="javascript:void(0)">28</a>
        </strong>

    <span class="time"></span>
    <span class="time"></span>
    <span class="time"></span>
  </li>

  <li>
    <strong>
            <a href="javascript:void(0)">30</a>
        </strong>

    <span class="time"></span>
    <span class="time"></span>
    <span class="time"></span>
  </li>

  <li>
    <strong>
            <a href="javascript:void(0)">93</a>
        </strong>

    <span class="time"></span>
    <span class="time"></span>
  </li>

  <li>
    <strong>
            <a href="javascript:void(0)">2</a>
        </strong>

    <span class="time"></span>
    <span class="time"></span>
    <span class="time"></span>
  </li>

  <li>
    <strong>
            <a href="javascript:void(0)">51</a>
        </strong>

    <span class="time"></span>
    <span class="time"></span>
    <span class="time"></span>
  </li>

  <li>
    <strong>
            <a href="javascript:void(0)">150</a>
        </strong>

    <span class="time"></span>
    <span class="time"></span>
  </li>

  <li>
    <strong>
            <a href="javascript:void(0)">60</a>
        </strong>

    <span class="time"></span>
    <span class="time"></span>
    <span class="time"></span>
  </li>

  <li>
    <strong>
            <a href="javascript:void(0)">26</a>
        </strong>

    <span class="time"></span>
    <span class="time"></span>
    <span class="time"></span>
  </li>

  <li>
    <strong>
            <a href="javascript:void(0)">63</a>
        </strong>

    <span class="time"></span>
    <span class="time"></span>
    <span class="time"></span>
  </li>

  <li>
    <strong>
            <a href="javascript:void(0)">61</a>
        </strong>

    <span class="time"></span>
    <span class="time"></span>
    <span class="time"></span>
  </li>

  <li>
    <strong>
            <a href="javascript:void(0)">63M</a>
        </strong>

    <span class="time"></span>
    <span class="time"></span>
    <span class="time"></span>
  </li>

  <li>
    <strong>
            <a href="javascript:void(0)">22</a>
        </strong>

    <span class="time"></span>
    <span class="time"></span>
  </li>
</ul>

You can target different screen size by addding @media query rules for li tag
suggestion: you may use tables for these type of data

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- <script src="https://cdn.tailwindcss.com"></script> -->

  <title>Document</title>
</head>
<style>
  li {
    width: 100%;
  }
  
  @media only screen and (max-width: 480px) {
    li {
      width: 100%;
    }
  }
  
  @media only screen and (min-width: 768px) {
    li {
      width: 50%;
    }
  }
  
  .buses li:before {
    content: "1F68C";
    padding-left: 20px;
    padding-right: 8px;
    overflow: hidden;
  }
  
  ul.buses {
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }
</style>

<body>
  <nav class="flex justify-center space-x-4">
    <a href="/dashboard" class="font-medium px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900">Home</a
      >
      <a
        href="/team"
        class="font-medium px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900"
        >Team</a
      >
      <a
        href="/projects"
        class="font-medium px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900"
        >Projects</a
      >
      <a
        href="/reports"
        class="font-medium px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900"
        >Reports</a
      >
    </nav>

    <script src="https://bus.dabase.com/static/main.js"></script>
    <ul class="buses">

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/155">155</a>
    </strong>

    <time datetime="2023-03-19T20:19:31&#43;08:00">2023-03-19T20:19:31&#43;08:00</time
        >
        <time datetime="2023-03-19T20:37:34&#43;08:00"
          >2023-03-19T20:37:34&#43;08:00</time
        >
        <time datetime="2023-03-19T20:50:38&#43;08:00"
          >2023-03-19T20:50:38&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/24">24</a>
        </strong>

        <time datetime="2023-03-19T20:19:55&#43;08:00"
          >2023-03-19T20:19:55&#43;08:00</time
        >
        <time datetime="2023-03-19T20:53:17&#43;08:00"
          >2023-03-19T20:53:17&#43;08:00</time
        >
        <time datetime="2023-03-19T20:54:15&#43;08:00"
          >2023-03-19T20:54:15&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/21">21</a>
        </strong>

        <time datetime="2023-03-19T20:20:44&#43;08:00"
          >2023-03-19T20:20:44&#43;08:00</time
        >
        <time datetime="2023-03-19T20:35:07&#43;08:00"
          >2023-03-19T20:35:07&#43;08:00</time
        >
        <time datetime="2023-03-19T20:49:38&#43;08:00"
          >2023-03-19T20:49:38&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/13">13</a>
        </strong>

        <time datetime="2023-03-19T20:20:48&#43;08:00"
          >2023-03-19T20:20:48&#43;08:00</time
        >
        <time datetime="2023-03-19T20:30:31&#43;08:00"
          >2023-03-19T20:30:31&#43;08:00</time
        >
        <time datetime="2023-03-19T20:45:41&#43;08:00"
          >2023-03-19T20:45:41&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/67">67</a>
        </strong>

        <time datetime="2023-03-19T20:22:24&#43;08:00"
          >2023-03-19T20:22:24&#43;08:00</time
        >
        <time datetime="2023-03-19T20:25:35&#43;08:00"
          >2023-03-19T20:25:35&#43;08:00</time
        >
        <time datetime="2023-03-19T20:27:59&#43;08:00"
          >2023-03-19T20:27:59&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/7">7</a>
        </strong>

        <time datetime="2023-03-19T20:22:26&#43;08:00"
          >2023-03-19T20:22:26&#43;08:00</time
        >
        <time datetime="2023-03-19T20:31:30&#43;08:00"
          >2023-03-19T20:31:30&#43;08:00</time
        >
        <time datetime="2023-03-19T20:45:46&#43;08:00"
          >2023-03-19T20:45:46&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/28">28</a>
        </strong>

        <time datetime="2023-03-19T20:22:48&#43;08:00"
          >2023-03-19T20:22:48&#43;08:00</time
        >
        <time datetime="2023-03-19T20:38:45&#43;08:00"
          >2023-03-19T20:38:45&#43;08:00</time
        >
        <time datetime="2023-03-19T20:50:09&#43;08:00"
          >2023-03-19T20:50:09&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/30">30</a>
        </strong>

        <time datetime="2023-03-19T20:25:57&#43;08:00"
          >2023-03-19T20:25:57&#43;08:00</time
        >
        <time datetime="2023-03-19T20:38:32&#43;08:00"
          >2023-03-19T20:38:32&#43;08:00</time
        >
        <time datetime="2023-03-19T20:53:32&#43;08:00"
          >2023-03-19T20:53:32&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/93">93</a>
        </strong>

        <time datetime="2023-03-19T20:27:43&#43;08:00"
          >2023-03-19T20:27:43&#43;08:00</time
        >
        <time datetime="2023-03-19T20:55:32&#43;08:00"
          >2023-03-19T20:55:32&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/2">2</a>
        </strong>

        <time datetime="2023-03-19T20:30:14&#43;08:00"
          >2023-03-19T20:30:14&#43;08:00</time
        >
        <time datetime="2023-03-19T20:39:08&#43;08:00"
          >2023-03-19T20:39:08&#43;08:00</time
        >
        <time datetime="2023-03-19T20:39:16&#43;08:00"
          >2023-03-19T20:39:16&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/51">51</a>
        </strong>

        <time datetime="2023-03-19T20:30:19&#43;08:00"
          >2023-03-19T20:30:19&#43;08:00</time
        >
        <time datetime="2023-03-19T20:36:15&#43;08:00"
          >2023-03-19T20:36:15&#43;08:00</time
        >
        <time datetime="2023-03-19T20:44:24&#43;08:00"
          >2023-03-19T20:44:24&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/150">150</a>
        </strong>

        <time datetime="2023-03-19T20:30:40&#43;08:00"
          >2023-03-19T20:30:40&#43;08:00</time
        >
        <time datetime="2023-03-19T20:50:54&#43;08:00"
          >2023-03-19T20:50:54&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/60">60</a>
        </strong>

        <time datetime="2023-03-19T20:31:03&#43;08:00"
          >2023-03-19T20:31:03&#43;08:00</time
        >
        <time datetime="2023-03-19T20:42:10&#43;08:00"
          >2023-03-19T20:42:10&#43;08:00</time
        >
        <time datetime="2023-03-19T20:57:53&#43;08:00"
          >2023-03-19T20:57:53&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/26">26</a>
        </strong>

        <time datetime="2023-03-19T20:31:06&#43;08:00"
          >2023-03-19T20:31:06&#43;08:00</time
        >
        <time datetime="2023-03-19T20:42:32&#43;08:00"
          >2023-03-19T20:42:32&#43;08:00</time
        >
        <time datetime="2023-03-19T20:56:32&#43;08:00"
          >2023-03-19T20:56:32&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/63">63</a>
        </strong>

        <time datetime="2023-03-19T20:32:56&#43;08:00"
          >2023-03-19T20:32:56&#43;08:00</time
        >
        <time datetime="2023-03-19T20:43:32&#43;08:00"
          >2023-03-19T20:43:32&#43;08:00</time
        >
        <time datetime="2023-03-19T20:59:15&#43;08:00"
          >2023-03-19T20:59:15&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/61">61</a>
        </strong>

        <time datetime="2023-03-19T20:35:28&#43;08:00"
          >2023-03-19T20:35:28&#43;08:00</time
        >
        <time datetime="2023-03-19T20:43:51&#43;08:00"
          >2023-03-19T20:43:51&#43;08:00</time
        >
        <time datetime="2023-03-19T20:55:03&#43;08:00"
          >2023-03-19T20:55:03&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/63M">63M</a>
        </strong>

        <time datetime="2023-03-19T20:36:45&#43;08:00"
          >2023-03-19T20:36:45&#43;08:00</time
        >
        <time datetime="2023-03-19T20:43:03&#43;08:00"
          >2023-03-19T20:43:03&#43;08:00</time
        >
        <time datetime="2023-03-19T20:51:48&#43;08:00"
          >2023-03-19T20:51:48&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/22">22</a>
        </strong>

        <time datetime="2023-03-19T20:37:51&#43;08:00"
          >2023-03-19T20:37:51&#43;08:00</time
        >
        <time datetime="2023-03-19T20:58:13&#43;08:00"
          >2023-03-19T20:58:13&#43;08:00</time
        >
      </li>
    </ul>

    <p>
      Hint: Tap <a style="text-decoration: none" href="/">🚏</a> to find closest
      bus stop
    </p>

    <h4>Last updated: <span id="lastupdated"></span></h4>
  </body>
</html>

Concept: This will even the gaps with maximum three items per row:

li { flex: 1 0 26%;}

(() => {
  function m(n, a) {
    if (n) {
      var r = a / 1e3;
      Math.abs(r) > 60 ? n.innerHTML = parseInt(r / 60) + "m" : n.innerHTML = parseInt(r) + "s", setTimeout(m, 1e3, n, a - 1e3)
    }
  }
  window.addEventListener("load", function() {
    var n = document.getElementsByTagName("time"),
      a = new Date;
    for (let e = 0; e < n.length; e++) {
      var r = new Date(n[e].getAttribute("datetime")),
        v = r.getTime() - a.getTime();
      m(n[e], v)
    }
    var p = document.getElementById("lastupdated");
    m(p, Date.now() - a);
    var t = JSON.parse(window.localStorage.getItem("history")) || {},
      o = document.getElementById("id").value,
      l = document.getElementById("namedBusStop") ? .innerHTML || "";
    if (console.log("DEBUG", o, l), o) {
      typeof t[o] > "u" && (t[o] = {}, t[o].count = 0, t[o].name = l);
      try {
        t[o].count++, t[o].name = l
      } catch (e) {
        console.log(e)
      }
      window.localStorage.setItem("history", JSON.stringify(t))
    } else navigator.geolocation && navigator.geolocation.getCurrentPosition(function(e) {
      var u = e.coords.latitude,
        w = e.coords.longitude;
      window.location = "/closest?lat=" + u + "&lng=" + w
    });
    var d = [];
    for (var g in t) d.push([g, t[g]]);
    d.sort(function(e, u) {
      return e[1].count - u[1].count
    });
    var h = document.getElementById("stations");
    for (let e = d.length - 1; e >= 0; e--) {
      var s = d[e][0],
        c = d[e][1],
        f = document.createElement("li"),
        i = document.createElement("a");
      c.name ? (i.setAttribute("href", "/?id=" + s + "&name=" + encodeURI(c.name)), i.appendChild(document.createTextNode(s + " " + c.name + " (" + c.count + ")"))) : (i.setAttribute("href", "/?id=" + s), i.appendChild(document.createTextNode(s))), f.appendChild(i), h.appendChild(f)
    }
  }, !1);
})();

.buses li:before {
  content: "1F68C";
  padding-left: 20px;
  padding-right: 8px;
  overflow: hidden;
}

ul.buses {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

ul.buses li {
  flex: 1 0 26%;
}

<ul class=buses>

  <li>
    <strong>
            <a href='https://busrouter.sg/#/services/155'>155</a>
        </strong>

    <time dateTime="2023-03-19T20:19:31&#43;08:00">2023-03-19T20:19:31&#43;08:00</time>
    <time dateTime="2023-03-19T20:37:34&#43;08:00">2023-03-19T20:37:34&#43;08:00</time>
    <time dateTime="2023-03-19T20:50:38&#43;08:00">2023-03-19T20:50:38&#43;08:00</time>
  </li>
  <li>
    <strong>
            <a href='https://busrouter.sg/#/services/24'>24</a>
        </strong>

    <time dateTime="2023-03-19T20:19:55&#43;08:00">2023-03-19T20:19:55&#43;08:00</time>
    <time dateTime="2023-03-19T20:53:17&#43;08:00">2023-03-19T20:53:17&#43;08:00</time>
    <time dateTime="2023-03-19T20:54:15&#43;08:00">2023-03-19T20:54:15&#43;08:00</time>
  </li>
  <li>
    <strong>
            <a href='https://busrouter.sg/#/services/21'>21</a>
        </strong>

    <time dateTime="2023-03-19T20:20:44&#43;08:00">2023-03-19T20:20:44&#43;08:00</time>
    <time dateTime="2023-03-19T20:35:07&#43;08:00">2023-03-19T20:35:07&#43;08:00</time>
    <time dateTime="2023-03-19T20:49:38&#43;08:00">2023-03-19T20:49:38&#43;08:00</time>
  </li>
  <li>
    <strong>
            <a href='https://busrouter.sg/#/services/13'>13</a>
        </strong>

    <time dateTime="2023-03-19T20:20:48&#43;08:00">2023-03-19T20:20:48&#43;08:00</time>
    <time dateTime="2023-03-19T20:30:31&#43;08:00">2023-03-19T20:30:31&#43;08:00</time>
    <time dateTime="2023-03-19T20:45:41&#43;08:00">2023-03-19T20:45:41&#43;08:00</time>
  </li>
  <li>
    <strong>
            <a href='https://busrouter.sg/#/services/67'>67</a>
        </strong>

    <time dateTime="2023-03-19T20:22:24&#43;08:00">2023-03-19T20:22:24&#43;08:00</time>
    <time dateTime="2023-03-19T20:25:35&#43;08:00">2023-03-19T20:25:35&#43;08:00</time>
    <time dateTime="2023-03-19T20:27:59&#43;08:00">2023-03-19T20:27:59&#43;08:00</time>
  </li>
  <li>
    <strong>
            <a href='https://busrouter.sg/#/services/7'>7</a>
        </strong>

    <time dateTime="2023-03-19T20:22:26&#43;08:00">2023-03-19T20:22:26&#43;08:00</time>
    <time dateTime="2023-03-19T20:31:30&#43;08:00">2023-03-19T20:31:30&#43;08:00</time>
    <time dateTime="2023-03-19T20:45:46&#43;08:00">2023-03-19T20:45:46&#43;08:00</time>
  </li>
  <li>
    <strong>
            <a href='https://busrouter.sg/#/services/28'>28</a>
        </strong>

    <time dateTime="2023-03-19T20:22:48&#43;08:00">2023-03-19T20:22:48&#43;08:00</time>
    <time dateTime="2023-03-19T20:38:45&#43;08:00">2023-03-19T20:38:45&#43;08:00</time>
    <time dateTime="2023-03-19T20:50:09&#43;08:00">2023-03-19T20:50:09&#43;08:00</time>
  </li>
  <li>
    <strong>
            <a href='https://busrouter.sg/#/services/30'>30</a>
        </strong>

    <time dateTime="2023-03-19T20:25:57&#43;08:00">2023-03-19T20:25:57&#43;08:00</time>
    <time dateTime="2023-03-19T20:38:32&#43;08:00">2023-03-19T20:38:32&#43;08:00</time>
    <time dateTime="2023-03-19T20:53:32&#43;08:00">2023-03-19T20:53:32&#43;08:00</time>
  </li>
  <li>
    <strong>
            <a href='https://busrouter.sg/#/services/93'>93</a>
        </strong>

    <time dateTime="2023-03-19T20:27:43&#43;08:00">2023-03-19T20:27:43&#43;08:00</time>
    <time dateTime="2023-03-19T20:55:32&#43;08:00">2023-03-19T20:55:32&#43;08:00</time>

  </li>
  <li>
    <strong>
            <a href='https://busrouter.sg/#/services/2'>2</a>
        </strong>

    <time dateTime="2023-03-19T20:30:14&#43;08:00">2023-03-19T20:30:14&#43;08:00</time>
    <time dateTime="2023-03-19T20:39:08&#43;08:00">2023-03-19T20:39:08&#43;08:00</time>
    <time dateTime="2023-03-19T20:39:16&#43;08:00">2023-03-19T20:39:16&#43;08:00</time>
  </li>
  <li>
    <strong>
            <a href='https://busrouter.sg/#/services/51'>51</a>
        </strong>

    <time dateTime="2023-03-19T20:30:19&#43;08:00">2023-03-19T20:30:19&#43;08:00</time>
    <time dateTime="2023-03-19T20:36:15&#43;08:00">2023-03-19T20:36:15&#43;08:00</time>
    <time dateTime="2023-03-19T20:44:24&#43;08:00">2023-03-19T20:44:24&#43;08:00</time>
  </li>
  <li>
    <strong>
            <a href='https://busrouter.sg/#/services/150'>150</a>
        </strong>

    <time dateTime="2023-03-19T20:30:40&#43;08:00">2023-03-19T20:30:40&#43;08:00</time>
    <time dateTime="2023-03-19T20:50:54&#43;08:00">2023-03-19T20:50:54&#43;08:00</time>

  </li>
  <li>
    <strong>
            <a href='https://busrouter.sg/#/services/60'>60</a>
        </strong>

    <time dateTime="2023-03-19T20:31:03&#43;08:00">2023-03-19T20:31:03&#43;08:00</time>
    <time dateTime="2023-03-19T20:42:10&#43;08:00">2023-03-19T20:42:10&#43;08:00</time>
    <time dateTime="2023-03-19T20:57:53&#43;08:00">2023-03-19T20:57:53&#43;08:00</time>
  </li>
  <li>
    <strong>
            <a href='https://busrouter.sg/#/services/26'>26</a>
        </strong>

    <time dateTime="2023-03-19T20:31:06&#43;08:00">2023-03-19T20:31:06&#43;08:00</time>
    <time dateTime="2023-03-19T20:42:32&#43;08:00">2023-03-19T20:42:32&#43;08:00</time>
    <time dateTime="2023-03-19T20:56:32&#43;08:00">2023-03-19T20:56:32&#43;08:00</time>
  </li>
  <li>
    <strong>
            <a href='https://busrouter.sg/#/services/63'>63</a>
        </strong>

    <time dateTime="2023-03-19T20:32:56&#43;08:00">2023-03-19T20:32:56&#43;08:00</time>
    <time dateTime="2023-03-19T20:43:32&#43;08:00">2023-03-19T20:43:32&#43;08:00</time>
    <time dateTime="2023-03-19T20:59:15&#43;08:00">2023-03-19T20:59:15&#43;08:00</time>
  </li>
  <li>
    <strong>
            <a href='https://busrouter.sg/#/services/61'>61</a>
        </strong>

    <time dateTime="2023-03-19T20:35:28&#43;08:00">2023-03-19T20:35:28&#43;08:00</time>
    <time dateTime="2023-03-19T20:43:51&#43;08:00">2023-03-19T20:43:51&#43;08:00</time>
    <time dateTime="2023-03-19T20:55:03&#43;08:00">2023-03-19T20:55:03&#43;08:00</time>
  </li>
  <li>
    <strong>
            <a href='https://busrouter.sg/#/services/63M'>63M</a>
        </strong>

    <time dateTime="2023-03-19T20:36:45&#43;08:00">2023-03-19T20:36:45&#43;08:00</time>
    <time dateTime="2023-03-19T20:43:03&#43;08:00">2023-03-19T20:43:03&#43;08:00</time>
    <time dateTime="2023-03-19T20:51:48&#43;08:00">2023-03-19T20:51:48&#43;08:00</time>
  </li>
  <li>
    <strong>
            <a href='https://busrouter.sg/#/services/22'>22</a>
        </strong>

    <time dateTime="2023-03-19T20:37:51&#43;08:00">2023-03-19T20:37:51&#43;08:00</time>
    <time dateTime="2023-03-19T20:58:13&#43;08:00">2023-03-19T20:58:13&#43;08:00</time>
  </li>
</ul>

<p>Hint: Tap <a style="text-decoration: none;" href="/">🚏</a> to find closest bus stop</p>

<h4>Last updated: <span id=lastupdated></span></h4>

jsFiddle demo

Please signup or login to give your own answer.

Click here to cancel reply.

How do I make this flex box CSS gap even? – Html

Answers