Динамически помещать коробки в контейнер с flexbox

Question

Я хочу упорядочить ящики в контейнере, используя flexbox.Расположение выглядит следующим образом:

Для трех или четырех ящиков коробки должны располагаться, как на первом рисунке.Для шести ящиков ящики должны помещаться в два ряда с тремя столбцами.Однако для семи блоков расположение должно выглядеть так, как показано на втором рисунке, и т. Д.

Ширина и высота контейнера фиксированы.

Возможно ли это исключительно с Flexbox?

HTML:

<div class="container">
  <div class="box">AB</div>
  <div class="box">CD</div>
  <div class="box">EF</div>
  <div class="box">GH</div>
  <div class="box">IJ</div>
  <div class="box">KL</div>
  <div class="box">MN</div>
  <div class="box">OP</div>
  <div class="box">QR</div>
  <div class="box">ST</div>
  <div class="box">UV</div>
  <div class="box">XY</div>
</div>

CSS:

.container {
  width: 160px;
  height: 160px;
  border: 1px solid blue;
  display: flex;
}

.box {
  border: 1px solid red;
  text-align: center;
}

JavaScript:

function align(nodes) {
    var nodeLength = nodes.length;
    if(nodeLength == 1) {
  // nodes occupies entire box
  }

  else if (nodeLength == 2) {
    // nodes displayed in two columns
  }

  else if(nodeLength > 2 && nodeLength < 5) {
  // nodes displayed in two rows, two columns
  }

  else if(nodeLength > 4 && nodeLength <= 6) {
  // display in two columns and three rows
  }

 /*
   .
   .
   .
   and so on
 */
}

var boxes = document.getElementsByClassName('box');

align(boxes);

Здесь является скрипкой длято же самое.

Answer 1

Решение Flexbox (без JavaScript)

Рассчитать ширину и высоту каждого элемента в квадрате следующим образом

.square-item {
  width: calc(100% / n);
  height: calc(100% / n);
}

n - количество столбцов (или строк).

Пример

.square-wrapper {
  display: inline-block;
  vertical-align: top;
}

.square {
  --size: 160px;
}

.square {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: var(--size);
  height: var(--size);
}

.square>div {
  box-shadow: 1px 3px 3px #abc;
  position: relative;
}

.square p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.square.s-2_2>div {
  width: calc(100% / 2);
  height: calc(100% / 2);
}

.square.s-3_3>div {
  width: calc(100% / 3);
  height: calc(100% / 3);
}

.square.s-4_4>div {
  width: calc(100% / 4);
  height: calc(100% / 4);
}


/* Add more custom square classes */


/* ... */

<div class="square-wrapper">
  <div class="square s-2_2">
    <div>
      <p>1</p>
    </div>
    <div>
      <p>2</p>
    </div>
    <div>
      <p>3</p>
    </div>
    <div>
      <p>4</p>
    </div>
  </div>
</div>
<div class="square-wrapper">
  <div class="square s-3_3">
    <div>
      <p>1</p>
    </div>
    <div>
      <p>2</p>
    </div>
    <div>
      <p>3</p>
    </div>
    <div>
      <p>4</p>
    </div>
    <div>
      <p>5</p>
    </div>
    <div>
      <p>6</p>
    </div>
    <div>
      <p>7</p>
    </div>
    <div>
      <p>8</p>
    </div>
    <div>
      <p>9</p>
    </div>
  </div>
</div>
<div class="square-wrapper">
  <div class="square s-4_4">
    <div>
      <p>1</p>
    </div>
    <div>
      <p>2</p>
    </div>
    <div>
      <p>3</p>
    </div>
    <div>
      <p>4</p>
    </div>
    <div>
      <p>5</p>
    </div>
    <div>
      <p>6</p>
    </div>
    <div>
      <p>7</p>
    </div>
    <div>
      <p>8</p>
    </div>
    <div>
      <p>9</p>
    </div>
    <div>
      <p>10</p>
    </div>
    <div>
      <p>11</p>
    </div>
    <div>
      <p>12</p>
    </div>
    <div>
      <p>13</p>
    </div>
    <div>
      <p>14</p>
    </div>
    <div>
      <p>15</p>
    </div>
    <div>
      <p>16</p>
    </div>
  </div>
</div>

Решение JavaScript с flexbox

Получить все .square.Перебирайте их, перебирайте их дочерние элементы и добавляйте стиль каждому из них.

child.setAttribute("style", "width: ...; height: ...")

Размер: calc(100% / Math.sqrt(number of square items))

Пример

var squares = document.querySelectorAll(".square");

for (var i = 0; i < squares.length; i += 1) {
  for (var j = 0; j < squares[i].children.length; j += 1) {
    var child = squares[i].children[j],
      size = "calc(100% /" + Math.ceil(Math.sqrt(squares[i].children.length)) + ")";
    child.setAttribute("style", "width: " + size + "; height: " + size);
  }
}

.square-wrapper {
  display: inline-block;
  vertical-align: top;
}

.square {
  --size: 160px;
}

.square {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  width: var(--size);
  height: var(--size);
}

.square>div {
  box-shadow: 1px 3px 3px #abc;
  position: relative;
}

.square p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="square-wrapper">
  <div class="square">
    <div>
      <p>1</p>
    </div>
    <div>
      <p>2</p>
    </div>
    <div>
      <p>3</p>
    </div>
    <div>
      <p>4</p>
    </div>
    <div>
      <p>5</p>
    </div>
  </div>
</div>

<div class="square-wrapper">
  <div class="square">
    <div>
      <p>1</p>
    </div>
    <div>
      <p>2</p>
    </div>
    <div>
      <p>3</p>
    </div>
    <div>
      <p>4</p>
    </div>
  </div>
</div>
<div class="square-wrapper">
  <div class="square">
    <div>
      <p>1</p>
    </div>
    <div>
      <p>2</p>
    </div>
    <div>
      <p>3</p>
    </div>
    <div>
      <p>4</p>
    </div>
    <div>
      <p>5</p>
    </div>
    <div>
      <p>6</p>
    </div>
    <div>
      <p>7</p>
    </div>
    <div>
      <p>8</p>
    </div>
    <div>
      <p>9</p>
    </div>
  </div>
</div>
<div class="square-wrapper">
  <div class="square">
    <div>
      <p>1</p>
    </div>
    <div>
      <p>2</p>
    </div>
    <div>
      <p>3</p>
    </div>
    <div>
      <p>4</p>
    </div>
    <div>
      <p>5</p>
    </div>
    <div>
      <p>6</p>
    </div>
    <div>
      <p>7</p>
    </div>
    <div>
      <p>8</p>
    </div>
    <div>
      <p>9</p>
    </div>
    <div>
      <p>10</p>
    </div>
    <div>
      <p>11</p>
    </div>
    <div>
      <p>12</p>
    </div>
    <div>
      <p>13</p>
    </div>
    <div>
      <p>14</p>
    </div>
    <div>
      <p>15</p>
    </div>
    <div>
      <p>16</p>
    </div>
  </div>
</div>