3

Есть обычный 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 - две и т. д.

1
  • Ну если честно, то только JavaScript. 13 июл 2017 в 17:17

1 ответ 1

3

Можно с дополнительными обертками - расти будут обертки, а элементы-ячейки внутри растущих оберток будут занимать 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>

3
  • Отличная идея. Жалко что мне не подойдёт :) Но главное, что проблему решает
    – Yuri
    14 июл 2017 в 12:04
  • А чо не подойдет? 14 июл 2017 в 12:20
  • Та элемент один должен быть, т.е. без элемент в элементе
    – Yuri
    14 июл 2017 в 12:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.