请检查这个fiddle当您调整窗口大小时以及卡片向下移动时,卡片的底部看起来很奇怪,它们之间的空间更大。我希望卡片的底部与上面的卡片对齐。
我知道这可以通过 display: inline-block
轻松完成,但我正在尝试使用 flexbox 来做到这一点,即 display: flex
。
.parent {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.child {
min-width: 200px;
width: 200px;
height: 200px;
box-shadow: 0px 0px 0px 1px black;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
最佳答案
对齐 flex 容器中的最后一项可能很棘手。 flexbox 规范中目前没有内置属性或方法来定位行/列中的最后一项。
但是有很多 hack,包括使用不可见的 flex 元素和伪元素来占据空间,从而实现所需的对齐。
这一切都包含在以下帖子中:
但是,您可以使用 Flex Layout 的姊妹技术 Grid Layout 轻松实现您的布局:
.parent {
display: grid; /* 1 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 2 */
grid-auto-rows: 200px; /* 3 */
grid-gap: 10px; /* 4 */
}
.child {
box-shadow: 0px 0px 0px 1px black;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
注意事项:
- 建立 block 级网格容器。 ( spec reference )
- 使网格能够创建尽可能多的列以适应屏幕(
自动填充
)。每列最小宽度为 200px,最大宽度为1fr
(即可用空间的比例;类似于flex-grow: 1
)。 ( spec reference ) - 网格将自动创建新行以容纳环绕的网格元素。每行的高度为 200 像素。 ( spec reference )
grid-column-gap
和grid-row-gap
的简写。在每个网格项周围设置 10px 的“边距”。 ( spec reference )
浏览器对 CSS 网格的支持
- Chrome - 自 2017 年 3 月 8 日起全面支持(第 57 版)
- Firefox - 自 2017 年 3 月 6 日起全面支持(第 52 版)
- Safari - 截至 2017 年 3 月 26 日的全面支持(版本 10.1)
- Edge - 截至 2017 年 10 月 16 日的全面支持(第 16 版)
- IE11 - 不支持当前规范;支持过时版本
这是完整的图片:http://caniuse.com/#search=grid
关于html - 当元素没有填满行时,不要在元素之间显示很大的差距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43544484/