Пустая ячейка во flexbox

316

16 июля 2017, 11:24

Есть обычный flebox с элементами:

.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>

Как вставить в этот flexbox пустую ячейку после offset не использую дополнительной разметки и after с before?

Т.е. нужно, чтобы вышло вот так, но без указания ширины у блоков. Только 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>

Количество ячеек неизвестно. Offset-1 означает, что нужно сделать пустую одну ячейку, offset-2 - две и т. д.

Answer 1

Можно с дополнительными обертками - расти будут обертки, а элементы-ячейки внутри растущих оберток будут занимать 1/2, 1/3 и т. д. ширины оберток.

.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>