Ich verwende derzeit Angular 5, das eine Schleife ausführt und mehrere Container als Liste anzeigt (Tausende von Ergebnissen).Gleicher Abstand zwischen Divs mit Angular 5 und Flex Layout
<div class="temp-list">
<div>
<ng-container #activityCards *ngFor="let activity of (activityCollection.activities | filters: filtersObject); let i = index;">
<div class="activity-card-container" *ngIf="checkIsVisible(i)" [ngClass.gt-md]="{'display-inline': true, 'large-activity': i < 3, 'medium-activity': i > 2 && i < 7, 'small-activity': i > 6 }" >
<activity-card [activity]="activity"></activity-card>
</div>
</ng-container>
</div>
</div>
Sie können auch auf dem Index des Elements sehen, dass ich eine Flex-Layout ngClass bin mit, die auf Basis einer Klasse zu dem Behälter hinzufügt. Die ersten drei Behälter sind groß (33,33%), die nächsten vier sind mittelgroß (25%) und der Rest ist klein (20%). Ich möchte jedoch 24px Platz zwischen jedem Element; Ich will nur diesen Raum zwischen den Containern, nicht am linken oder am rechten Ende.
Hier ist die CSS ich im Moment haben.
.temp-list {
font-size: 0;
}
.activity-card-container {
position: relative;
box-sizing: border-box;
}
.display-inline {
display: inline-block;
padding: 0 24px 24px 0;
}
.large-activity {
width: 33.333%;
}
.large-activity:nth-child(3) {
padding-right: 0;
}
.medium-activity {
width: 25%;
}
.medium-activity:nth-child(7) {
padding-right: 0;
}
.small-activity {
width: 20%;
}
.small-activity:nth-child(5n + 12) {
padding-right: 0;
}
Wie Sie sehen können, habe ich 24px Polsterung rechts und unten in jedem Container hinzugefügt. Ich wähle dann das letzte Element jeder Zeile aus und ignoriere das Padding. Das Problem bei dieser Lösung ist, dass das letzte Element immer 24 Pixel breiter als die vorherigen Container ist. Ich brauche sie alle auf die gleiche Breite. Irgendwelche Gedanken?
Haben Sie versucht, dies mit einem Flexbox Layout? Sie würden nicht alle Breiten prozentual oder die n-ten untergeordneten Selektoren benötigen. – jmargolisvt
Jedes Mal, wenn ich Flex zum übergeordneten Container hinzufüge, werden alle, die Divs enthalten, in einer Zeile aufgelistet. Sie stapeln nicht mehr wie ich möchte. –
Wenn Sie Ihre Ergebnisse teilen können (wie 3 in der ersten div, 4 in der nächsten, etc.), dann Sie Flexbox würde den Rest erledigen. – jmargolisvt