如何使用FlexBox制作具有百分比高度的包裹式div

Question

我有以下flexbox CSS。

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
}

li {
  width: 50%; /* allows for 2 boxes per row */
  /* height: I don't know! */
  background: red;
  outline: 1px solid yellow;
}

<ul>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
</ul>

我已经弄清楚如何将 width 设置为百分比，以便每行显示2个项目。但是现在我希望这些项目的高度与最终的宽度百分比相同。想知道如何做到这一点。

理想情况下，该解决方案将允许以下情况：

1. 框之间的填充/边距。
2. 盒子上的边框。
3. 只是常规的，在框之间或框上的边框之间没有填充或间隔。

我希望高度形成正方形。因此，问题是如何将div形成正方形，而不管其宽度百分比如何。所以我可以每行3或4 div，或者每行10或20 div。然后，我想说“高度为x％”或类似的值，以便形成一个正方形。

如果不可能将这个系统形成正方形，那么我可以明确地确定它们的大小。然后的问题是如何将它们居中以使其适合某个宽度。但是我宁愿使用百分比宽度来解决这个问题。

特别是我想使用flexbox。

Answer 1

这是您要问的吗？

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
}

li {
  width: 50%; /* allows for 2 boxes per row */
  /* height: I don't know! */
  background: red;
  padding-top:50%;
  position:relative;
  outline: 1px solid yellow;
}
li a{
   position:absolute;
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);

<ul>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
</ul>