Question

我在措辞方面遇到了一些麻烦，这可能是我找不到任何答案的主要原因。

我有一个容器，包含多个（精确计数未知）元素，我想在一个漂亮而灵活的网格中显示它们。我唯一的要求是所有行的盒子大小相等，盒子之间的边距也是如此。当然，他们要使用整列的宽度。

假设我有5个盒子，并且连续显示3个空间，我想在第一行中有3个盒子，在第二行中需要2个盒子。

检查一下这些额外的视觉辅助：https://codepen.io/pjetr/pen/vJgzPJ

显示flex，flex-start

|########  ########  ########         |
|########  ########                   |

显示flex，flex 1

|###########  ###########  ###########|
|#################  ##################|

显示flex，间隔

|########       ########      ########|
|########                     ########|

显示flex，space-around

|########      ########       ########|
|       ########        ########      |

选项1：等于天沟

|########       ########      ########|
|########       ########              |

选项2：等宽

|###########  ###########  ###########|
|###########  ###########             |

正如您所看到的，有两种可能的结果我会接受，但我不知道如何在没有javascript的情况下实现它们。
是否有可能只使用CSS？

目前我已经选择了灵活启动，但我希望有人可以帮我解决这个问题。

Answer 1

试试这个：

* {
    margin: 0; padding: 0;
    box-sizing: border-box;
}

.container {
    border: 1px solid;
    padding: 15px 0 0 15px;
    margin: 15px auto;
    width: 100%;
    max-width: 960px;
    display: flex;
    flex-wrap: wrap;
}

.box {
    height: 32px;
    flex: 0 0 calc(calc(100%/3) - 15px);
    margin-bottom: 15px;
    margin-right: 15px;
    border: 1px solid;
    background-color: #D0D0D0;
}

Answer 2

当然，只是不要在.box元素上使用固定宽度。

.container {
  border: 1px solid;
  padding: 15px 0 0 15px;
  margin: 15px auto;
  width: 100%;
  max-width: 960px;
  display: flex;
  flex-wrap: wrap;
}

.box {
  height: 32px;
  width: calc((100% / 3) - 15px);
  box-sizing: border-box;
  margin-bottom: 15px;
  margin-right: 15px;
  border: 1px solid;
  background-color: #D0D0D0;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

如何创建具有相同排水沟/箱宽的自动流体网格？

2 个答案: