Css 角材料清单设计

我需要设计一个父容器，它有固定长度的子列表项（150px）

1） 调整父容器的大小时，子列表项应从左向右流动，并应拆分为新行&子列表项之间的空间应均匀分布

请告诉我如何实现这一点使用角材料。请看下图了解我的要求

我试图实现这一点。。使用以下代码

<div layout-padding layout-fill layout="row" layout-wrap layout-align="space-around start">

    <div ng-repeat="student in students"
         style="width: 150px; height: 52px;line-height: 52px;min-height: 52px;max-height: 52px;
            margin:8px;padding: 0px; border: solid 1px"
         draggable="true">

        {{student.name}}

    </div>

</div>

{{student.name}

但这就是我得到的

---

这将是一个全新的控件，您需要使用“片”角材质创建自己的控件。例如，可以使用“angular material md”按钮创建列表项，如果希望滚动，可以将所有按钮放置在md内容中，并使用md布局对齐项目。显然，最重要的部分将是样式为您的控制有角度材料的外观和感觉

---

这里的要点是，您需要创建自定义控件。我建议您创建自己的控制模块，并添加必要的指令和服务，以使您的控制正常工作

感谢@MikeHarrison先生。。。我已经像下面那样编辑了我的代码&结果正是我想要的

<div class="md-padding" layout="row" layout-fill layout-wrap layout-align="start start">

    <md-list-item ng-repeat="student in students" draggable="true" flex-xs="100" flex-sm="50" flex-md="33"
                  flex-gt-md="25" class="md-3-line" ng-click="alert('hi')">

        <img src="../../_resources/images/boy_real.jpg" class="md-avatar"/>

        <div class="md-list-item-text">
            <h3> {{student.name}} </h3>
            <h4> {{student.roll}} </h4>
            <p> {{student.desc + ' guy'}} </p>
        </div>

        <md-divider md-inset></md-divider>

    </md-list-item>

</div>

{{student.name}
{{student.roll}
{{student.desc+'guy'}}

浏览器中的结果是

在手机上的结果是

---

您看过布局文档了吗？您应该能够在父容器上执行：

layout=“row”

。既然你已经有了固定的宽度，你不需要对孩子们做任何事情。我也用材料做了一些事情。我认为布局的材料设计方式是使用flex指令/类，而不是固定宽度。我想你必须编写自定义css来完成你想做的事情。@mike Harison，先生，我已经在我的父容器中包含layout=“row”。查看我的结果图像和我的实现代码@raichu当我在父容器中使用layout=“space around start”时，所有内容都会根据我的需要工作，但最后一行项目是我的问题。。我该怎么做才能使它们向左对齐。！啊，我明白你的意思了。在这种情况下，浪费空间的原因是因为您为子对象设置了固定的宽度。您可以使用flex指令，它也包含在我链接到的文档中。如果您希望每行使用4个，请使用

flex=“25”

，每行使用5个

flex=“50”

等。是的，我这样做是为了创建一个手风琴，而在我需要它的时候，它的角度材质是没有的。如果你创建了一个自定义控件，你甚至可以与开源社区共享它。太棒了！是的，在这种情况下，棱角材料的弯曲能力是救命稻草。使您的HTML非常干净，易于阅读。