Div使用Angular 5和Flex Layout的等距距离 [英] Equal distance between Div's using Angular 5 and Flex Layout
问题描述
我目前正在使用Angular 5,它运行一个循环并将几个容器显示为列表(成千上万个结果).
I am currently using Angular 5 that runs a loop and displays several containers as a list (Thousands of results).
<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>
您还可以看到我使用的是Flex Layout ngClass,它根据元素的索引向容器添加了一个类.前三个容器较大(33.33%),后四个容器中等(25%),其余容器较小(20%). 我希望每个元素之间有24px的间距;我只想要容器之间的空间,而不是在左端或右端.
You can also see that I am using a Flex Layout ngClass that adds a class to the container based on the index of the element. The first three containers are large(33.33%), the next 4 are medium(25%), and the rest are small(20%). I would like 24px of space between each element, however; I only want that space between containers, not at the left or right ends.
这是我目前拥有的CSS.
Here is the CSS I currently have.
.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;
}
如您所见,我在每个容器的右侧和底部添加了24px的填充.然后,我选择每行的最后一个元素,而忽略填充.此解决方案的问题在于,最后一个元素的宽度始终比以前的容器宽24px.我需要它们都具有相同的宽度.有什么想法吗?
As you can see I added 24px of padding to the right and bottom of each container. I then select the last element of each row and disregard the padding. The problem with this solution is that the last element is always 24px wider than the previous containers. I need them all to the same width. Any thoughts?
推荐答案
不是使用填充在项目之间创建空间,而是使用Flexbox和space-between
,然后使用CSS Calc从项目的宽度中减去所需的空间
Instead of using padding to create a space between items, use Flexbox and space-between
, and then, with CSS Calc, subtract the wanted space from the item's width.
假定的主容器应该是.activity-card-container
的父容器.
The assumed main container should be the .activity-card-container
's parent.
堆栈片段
.temp-list {
font-size: 0;
}
.temp-list > div { /* assumed the main parent container */
font-size: 0;
border: 1px solid red; /* for this demo */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.activity-card-container {
position: relative;
box-sizing: border-box;
background: lightgray; /* for this demo */
height: 70px; /* for this demo */
}
.large-activity {
width: calc(33.333% - 16px); /* 2 gaps * 24px = 48px / 3 items = 16px */
}
.medium-activity {
margin-top: 24px;
width: calc(25% - 18px); /* 3 gaps * 24px = 72px / 4 items = 18px */
}
.small-activity {
margin-top: 24px;
width: calc(20% - 19.6px); /* 4 gaps * 24px = 98px / 5 items = 19.6px */
}
<div class="temp-list">
<div>
<div class="activity-card-container large-activity">
activity-card
</div>
<div class="activity-card-container large-activity">
activity-card
</div>
<div class="activity-card-container large-activity">
activity-card
</div>
<div class="activity-card-container medium-activity">
activity-card
</div>
<div class="activity-card-container medium-activity">
activity-card
</div>
<div class="activity-card-container medium-activity">
activity-card
</div>
<div class="activity-card-container medium-activity">
activity-card
</div>
<div class="activity-card-container small-activity">
activity-card
</div>
<div class="activity-card-container small-activity">
activity-card
</div>
<div class="activity-card-container small-activity">
activity-card
</div>
<div class="activity-card-container small-activity">
activity-card
</div>
<div class="activity-card-container small-activity">
activity-card
</div>
</div>
</div>
这篇关于Div使用Angular 5和Flex Layout的等距距离的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!