Сделайте серию ящиков как можно большим, ограниченную родителем

Можно ли сделать серию блоков с фиксированным соотношением сторон (16/9) как можно большим внутри родительского элемента фиксированного размера? Количество дочерних блоков варьируется, поскольку они генерируются динамически.

Я думал об использовании flex-box, но не знаю, как вызвать разрыв в зависимости от размеров родительского элемента или количества дочерних элементов.

Было бы неплохо чисто CSS-решение, но использование JavaScript также возможно.

Пример с 5 коробками:

----------------
|    |    |    |
----------------
|    |    |
-----------

или 11 блоков в горизонтальном родительском элементе (ширина> высота):

-------------------------
|   |   |   |   |   |   |
-------------------------
|   |   |   |   |   |
---------------------

или 11 блоков в почти квадратном родительском элементе:

-----------------
|   |   |   |   |
-----------------
|   |   |   |   |
-----------------
|   |   |   |
-------------
Источник

2 ответа

Решение

Вы имеете в виду, как это? Все, что тебе нужно flex-flow: row wrap; в твоем контейнере вот так.

.container {
  background: #f68a37;
  display: flex;
  flex-flow: row wrap;
  width: 240px;
}
.box {
  height: 50px;
  width: 50px;
  margin: 5px;
  background: #8af637;
}
.container[large] {
  width: 480px;
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<br />
<div large class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<br />
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<br />
<div large class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Источник

Я думаю, это то, что вы искали.

HTML

<div class="main-wrapper">
  <div class="wrapper">
    <div class="main">
    </div>
  </div>
  <div class="wrapper">
    <div class="main">
    </div>
  </div>
  <div class="wrapper">
    <div class="main">
    </div>
  </div>
  <div class="wrapper">
    <div class="main">
    </div>
  </div>
  <div class="wrapper">
    <div class="main">
    </div>
  </div>
</div>

CSS

.main-wrapper {
  width: 100vw;//making it full screen, or you can also use fixed size here
  background #fff;
}
.wrapper {
  width: 20%; // 100/the number of children you want, in the case 5
  display: inline-block;
  position: relative;
  float:left;
  border: 1px solid #fff; // just for showing the boxes
}
.wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: block;
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: deepskyblue; //just for demonstrating
  color: white;
}

Скрипка https://jsfiddle.net/e34a5gbx/1/

Источник
Другие вопросы по тегам