JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>#1</li>
    <li>#2</li>
    <li>#3</li>
    <li>#4</li>
    <li>#5</li>
</ul>

CSS

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li {
    width: 100px;
    height: 100px;
    margin: 15px 0;
    padding: 0;
    border: solid 1px black;
    display:inline-block;
}

JavaScript

function setMargin() {
    ulWidth = $('ul').innerWidth();
    boxWidth = $('li').outerWidth();
    boxMargin = parseInt($('li').css('margin'));
    maxBoxNum = $("ul li").length;
    boxNum = Math.floor((ulWidth / (boxWidth + boxMargin)));
    totalMargin = ulWidth - (boxNum * boxWidth);
    eachMargin = totalMargin / (boxNum + 1);
    if (eachMargin < boxMargin) {
        boxNum -= 1;
        totalMargin = ulWidth - (boxNum * boxWidth);
        eachMargin = totalMargin / (boxNum + 1);
    }
    if (boxNum > maxBoxNum) {
        boxNum = maxBoxNum;
        totalMargin = ulWidth - (boxNum * boxWidth);
        eachMargin = totalMargin / (boxNum + 1);
    }
    $('li').css('margin-left', eachMargin);
}
$(document).ready(function () {
    setMargin();
});
$(window).resize(function () {
    setMargin();
});