Flexbox（是）

Question

基本上，我希望子div在父div中均匀分布，如果删除了其中一个子div，则应重新调整其余部分并再次均匀填充剩余空间。

例如：

 ---parent---------------
|  --------------------  |
| |              child | |
|  --------------------  |
|  --------------------  |
| |              child | |
|  --------------------  |
|  --------------------  |
| |              child | |
|  --------------------  |
 ------------------------

现在当删除子div时，它应该变为

 ---parent---------------
|  --------------------  |
| |              child | |
| |                    | |
| |                    | |
|  --------------------  |
|  --------------------  |
| |              child | |
| |                    | |
| |                    | |
|  --------------------  |
 ------------------------

现在，我想用纯html / css做这个，但目前我找不到解决方案。

我正在考虑的其他两个选择是：

使用javascript计算高度
为一堆场景创建不同的类（例如：父级用 2个孩子div，3个孩子div，4个孩子div等）然后加载它们相应地用php

任何人都有更好的主意吗？

Answer 1

将css tables与table-layout: fixed一起使用 - 无需使用javascript。

<强> FIDDLE

要查看此工作，请单击上述小提琴的一个li元素上的'inspect element'，然后右键单击'delete node'和walla！ - 正是你所需要的。

标记

<ul>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
</ul>

CSS

ul
{
    display: table;
    table-layout: fixed;
    width: 100%;
    border: 1px solid #c2c2c2;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

li
{
    text-align: center;
    display: table-row;
    background: pink;
}
span
{
    display: table-cell;
    vertical-align: middle;
    border-top: 1px solid green;
}

Answer 2

如果有人愿意使用CSS3，那么flexbox布局也是一个很好的解决方案！

.parent{
  height:200px;
  width:100%;
  display:flex;
  flex-direction:column;
}
.child{
  width:100%;
  height:100%;
}

Updated JSFiddle Link

Answer 3

我使用了display:table和display:table-row属性。

Here is the fiddle.

Answer 4

Flexbox（是）

假设您有一堆items，他们住在parentContainer中。如果parentContainer位于另一个容器（grandParentContainer中），则需要确保parentContainer占用了其可能的最大尺寸（适合年轻玩家使用）。

因此，可以说grandParentContainer占据了整个窗口。然后我们应该给parentContainer这样的CSS样式：

.parentContainer {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

有关其他justify-content选项，请参见best flexbox guide on the internet。

高度和宽度将占据超级容器（grandParentContainer）的100％。我们将容器描述为flexbox，并指定direction列，以便其垂直堆叠其子级。

然后也许给孩子留个1rem的边距，或者看起来像样的一半。

.item {
  margin: 1rem;
}

如何垂直，均匀地传播动态div？

4 个答案:

标记

CSS

Flexbox（是）