erreur de liste matérielle des composants angulaires en dard angulaire

Question

Chaque fois que j'essaie de remplir une liste d'article avec material-list dans un display: inline-flex; le flex ne répond pas, la liste s'aligne seulement horizontalement, mais si je change le code HTML de material-list à ul il remplit la liste comme prévu. Alors, quelqu'un peut-il dire ce que je fais mal?

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

Si vous supprimez les choses liées à la flexibilité et ajoutez le style suivant, il doit envelopper

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