Responsive Liste mit quadratischen Elementen

Question

Ich muss eine horizontale Liste von Benutzern anzeigen, die durch ein quadratisches Bild und ihren Namen definiert sind, wobei das Bild über dem Namen steht.

Aber ich habe einige Einschränkungen: Die gesamte Komponente muss reaktionsfähig sein, so dass sowohl das Bild als auch der Name entsprechend der angezeigten Höhe der Komponente geändert werden sollte, muss die Liste horizontal zentriert sein und sollte halten können genug Elemente, um die Breite der Anzeige zu füllen (ich habe eine Grenze von zehn verwendet).

Mein Problem ist, dass ich nicht mit den Regeln arbeiten konnte, die ich habe. Ich habe eine Flexbox für die Resistierbarkeit verwendet, aber es bricht immer das quadratische Verhältnis, oder ich breche die ansprechende Regel, indem ich eine feste Größe für die Bilder verwende.

So soll es aussehen. Um dieses Beispiel zu verwenden, habe ich eine feste Größe für das Bild verwendet.

EDIT: Ich sollte den Code haben natürlich bieten.

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

Nun stellt sich heraus, dass die Verwendung von justify-content: center für die Flexbox und flex-grow: 1 für die Elemente zur gleichen Zeit einfach nicht funktioniert.

Am Ende habe ich die flex-grow: 1 entfernt und alles hat perfekt funktioniert.

Ich habe keine Ahnung, ob sie zusammenarbeiten sollten, aber ich fand keine Dokumentation über ihre Inkompatibilität.

Ich werde auf jemanden warten, um mehr Einblick zu geben, wie Flexbox funktioniert, oder vielleicht eine bessere Lösung, aber für den Moment werde ich damit gehen.

Answer 2

Es ist ziemlich einfach mit CSS zu tun. Sie sollten den li-Anzeigeblock verwenden. Wenn Sie nicht sicher sind, teilen Sie den Code hier, damit ich überprüfen kann.