我想使用 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是相同的 fiddle 。
最佳答案
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>
关于javascript - 使用 flexbox 将盒子动态地放入容器中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50495835/