I am currently utilizing the power of flexbox to structure my elements. Within my layout, I have 5 lis (with room for growth) each set with a width of flex-basis:calc(100%/3). This configuration allows for 3 li's in each row within the wrapper (ul) that is sized at 70%.
All seems well up to this point. However, an issue arises when I introduce margins to the li's. The addition of a margin causes only 2 li's to display per row with excess spacing whereas I require 3.
In light of this dilemma, I've explored two potential solutions, yet each presents its own set of complications:
One approach involves applying a margin to the
li's, e.g.,10px, then compensating by reducing theheightandwidthof eachliby20px(10 * 2). Unfortunately, this strategy isn't feasible as it would result in undersizedli'scontrary to my defined dimensions.The other option entails setting the
justify-contentproperty to eitherspace-aroundorspace-between. Yet, this adjustment disrupts the desired chart-like arrangement of thelis, deviating from their intended positioning in columns and rows.
Is there a method to introduce a margin to the li without compromising other properties?
(I am open to incorporating JavaScript/JQuery if deemed necessary.)
Below is a snippet of the code:
body, html {
height:100%;
margin: 0;
padding:0;
}
#flexWrapper {
display: flex;
justify-content: center;
height: 100%;
align-items: center;
overflow: auto;
}
#flexContainer {
width: 70%;
background-color:yellow;
list-style-type: none;
padding: 0;
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content:flex-start;
}
li {
background-color: tomato;
border: 1px solid black;
height:50px;
box-sizing: border-box;
flex-basis:calc(100%/3);
margin:10px;
}<div id="flexWrapper">
<ul id="flexContainer">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
</div>