There is a usual flexbox with the elements:
.flexbox {
display: flex;
border: 2px solid red;
padding: 2.5px;
}
.flexbox__item {
border: 2px solid blue;
height: 50px;
margin: 2.5px;
flex-grow: 1;
}<div class="flexbox">
<div class="flexbox__item"></div>
<div class="flexbox__item offset-1"></div>
<div class="flexbox__item"></div>
</div>How to insert an empty cell in this flexbox after .offset-* without using additional markup and after with before?
Those. It is necessary that it come out like this, but without specifying the width of the blocks. Only flex-grow
.flexbox {
display: flex;
border: 2px solid red;
padding: 2.5px;
}
.flexbox__item {
border: 2px solid blue;
height: 50px;
margin: 2.5px;
width: 25%;
}
.offset-1 {
margin-right: calc(25% + 5px);
}<div class="flexbox">
<div class="flexbox__item"></div>
<div class="flexbox__item offset-1"></div>
<div class="flexbox__item"></div>
</div>The number of cells is unknown. Offset-1 means that you need to make an empty one cell,offset-2 means two cell, and so on.