I need help centering an element that is 100px in width on the display. On either side of this element, there are elements that are 300px and 200px wide.
I tried using flexbox to achieve this, but I ended up with two empty spaces or flexible-width elements. The centered element was only centered within the free space, not across the entire display width. You can see the issue in the image provided on codepen.
I specifically want a 100px box (like the one shown in the green row) in the middle. I cannot use float left/right for the side elements and then center the middle element because I need to add a background image to the flexible-width elements.
For more information, check out the code on codepen.
https://i.sstatic.net/45ftT.png
html, body, div {
width: 100%;
}
.row {
height: 100px;
}
.row.row-flex {
display: flex;
}
.row.row-green {
background-color: green;
}
.row.row-red {
background-color: red;
}
.col {
margin: 0 auto;
height: 100%;
border: 1px solid black;
text-align: center;
}
.col.col-100 {
width: 100px;
}
.col.col-200 {
width: 200px;
}
.col.col-300 {
width: 300px;
}
.col.col-flex {
flex: 1;
}<div class="row row-flex row-red">
<div class="col col-300">300px</div>
<div class="col col-flex"></div>
<div class="col col-100">100px</div>
<div class="col col-flex"></div>
<div class="col col-200">200px</div>
</div>
<div class="row row-green">
<div class="col col-100">100px</div>
</div>