angular 飞镖中 angular 组件的 Material 列表错误

Question

每当我尝试在 display: inline-flex; 中使用 material-list 填充项目列表时，flex 不会响应，列表只会水平对齐，但是如果我更改 HTML 从 material-list 到 ul 的代码，它会按预期填充列表。那么，谁能告诉我做错了什么？

list.html

    <div class="demo-list-content">
     <material-list>
        <material-list-item>
            <material-icon icon="home"></material-icon>
            <div class="demo-list-item">Item 1</div>
        </material-list-item>
        <material-list-item>
            <material-icon icon="home"></material-icon>
            <div class="demo-list-item">Item 1</div>
        </material-list-item>
        <material-list-item>
            <material-icon icon="home"></material-icon>
            <div class="demo-list-item">Item 1</div>
        </material-list-item>
        <material-list-item>
            <material-icon icon="home"></material-icon>
            <div class="demo-list-item">Item 1</div>
        </material-list-item>
        <material-list-item>
            <material-icon icon="home"></material-icon>
            <div class="demo-list-item">Item 1</div>
        </material-list-item>
    </material-list>
</div>

list.css

.demo-list-content {
    margin: 24px;
}

material-list {
    padding: 16px;
    display: inline-flex;
}

material-list-item {
    width: 200px;
    display: inline;
    flex-direction: column;
    border: solid;
    margin: 16px;
    text-align: center;
}

.demo-list-item {

}

Answer 1

如果您删除与 flex 相关的内容并添加以下样式，它应该换行

.material-list-item {
    float: left;
}