带有方形物品的响应列表

Question

我需要显示一个水平的用户列表，由方形图片及其名称定义，图片位于名称之上。

但是，我有一些约束：整个组件必须是响应式的，因此图片和名称都应根据组件的显示高度调整大小，列表必须在水平方向上居中，并且应该能够保持足够的用于填充显示宽度的项目（我使用了十个限制）。

我的问题是我无法使用我的规则。我使用了一个flexbox来实现可恢复性，但它总是打破方形比率，或者我通过使用固定大小的图片来打破响应规则。

这就是我想要的样子。举个例子，我使用了固定大小的图片。

编辑： 我当然应该提供代码。

HTML：

<div class="display-children">
<div ng-repeat="e in students.all"
        ng-click="chooseChild(e)"
        ng-class="{'selected': e == student }"
        class="round-avatar">

        <img ng-src="/userbook/avatar/[[ e.id ]]" alt="[[e.displayName]]"/>
        <span>[[ e.firstName ]]</span>
</div>

CSS：

.display-children {
    height: 12vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;

    .round-avatar {
      flex: 1 1 auto;
      opacity: 0.5;
      height: 100%;

      img {
        border-radius: 50%;
        height: 75%;
        display: block;
        overflow: hidden;
        border: 1px solid $medium-grey;
      }

      span {
        height: 25%;
        text-align: center;
        color: $medium-grey;
      }
    }
  }

Answer 1

使用css很容易。你应该使用li显示块。如果你不确定在这里分享代码，那么我可以检查。

Answer 2

事实证明，对于flexbox使用justify-content: center而对于项目同时使用flex-grow: 1却不起作用。

最后，我删除了flex-grow: 1，一切都运行良好。

我不知道他们是否打算一起工作，但我没有找到关于他们不兼容的文件。

我会等待有人更多地了解flexbox的工作原理，或者给我一个更好的解决方案，但目前我会继续这样做。