代码之家 › 专栏 › 技术社区 › darKnight

使用flexbox在容器中动态安装框

flexbox css3 css html javascript

darKnight · 技术社区 · 7 年前

我想使用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);

Here 就是一把小提琴。

1 回复 | 直到 7 年前

Sun 7 年前

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>

带flexbox的javascript解决方案

全力以赴 .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>