如何使用 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>

我已经弄清楚如何将 widths 设为一个百分比，以便每行显示 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>