In this scenario, no matter what value is assigned to justify-content, it is difficult to horizontally align the elements around their gaps.
* {
box-sizing: border-box;
margin: 0; padding: 0;
}
html, body {
height: 100%;
}
body, div {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
div {
width: 10rem;
height: 10rem;
padding: 2rem 0rem;
background-color: rgba( 0,0,0,0.0725 );
}
span {
outline: solid 0.1rem red;
}
span:nth-of-type( 2n ) {
margin: 0.5rem;
width: 2rem;
height: 1rem;
}<div>
<span>first item</span> <span></span>
<span>second item</span> <span></span>
<span>third item(etc)</span> <span></span>
</div>Here is the intended outcome displayed below.
* {
box-sizing: border-box;
margin: 0; padding: 0;
}
html, body {
height: 100%;
}
body, div {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
div {
width: 10rem; height: 10rem;
padding: 2rem 0rem;
background-color: rgba( 0,0,0,0.0725 );
}
span {
outline: solid 0.1rem red;
}
span:nth-of-type( 2n ) {
margin: 0.5rem;
width: 2rem;
height: 1rem;
}
/* additional code added below. Utilizing transforms to adjust each element individually */
span:nth-of-type( 3 ), span:nth-of-type( 4 ) {
transform: translateX( 0.5rem );
}
span:nth-of-type( 1 ), span:nth-of-type( 2 ) {
transform: translateX( 1rem );
}<div>
<span>first item</span> <span></span>
<span>second item</span> <span></span>
<span>third item(etc)</span> <span></span>
</div>Is there a method to achieve the desired layout above without the need to target each individual element? When dealing with a large list of items, targeting each one for alignment would not be feasible.
Can the intended outcome be accomplished without modifying the base HTML or specifying each element?