Empty cell in flexbox

Question

There is a regular flebox with 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 into this flexbox an empty cell after offset I do not use additional markup and after with before?

Those. you need to 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 single cell, offset-2 - two, and so on.

Sasha Omelchenko Sasha Omelchenko 10.9k four 20 52 · Accepted Answer · 2017-07-14T11:58:30

It is possible with additional wrappers - the wrappers will grow, and the cell elements inside the growing wrappers will occupy 1/2, 1/3, etc. of the wrapper width.

 .flexbox { display: flex; border: 2px solid red; padding: 3px; } .flexbox__item { margin: 3px; flex-grow: 1; } .flexbox__item-inner { border: 2px solid blue; height: 50px; } .offset-1 { flex-grow: 2; } .offset-1 .flexbox__item-inner { width: 50%; } .offset-2 { flex-grow: 3; } .offset-2 .flexbox__item-inner { width: 33.33%; }

 <div class="flexbox"> <div class="flexbox__item"> <div class="flexbox__item-inner"></div> </div> <div class="flexbox__item offset-1"> <div class="flexbox__item-inner"></div> </div> <div class="flexbox__item"> <div class="flexbox__item-inner"></div> </div> </div> <div class="flexbox"> <div class="flexbox__item"> <div class="flexbox__item-inner"></div> </div> <div class="flexbox__item offset-2"> <div class="flexbox__item-inner"></div> </div> <div class="flexbox__item"> <div class="flexbox__item-inner"></div> </div> </div>

It is a pity that it will not work for me :) But the main thing is that the problem is solved

Empty cell in flexbox

1 answer 1

More articles: