3

请检查这个小提琴，当你调整窗口大小和卡片向下时，卡片的底部看起来很奇怪，它们之间有更多的空间。我希望卡片的底部部分与上述卡片对齐。

我知道这可以很容易地完成，display: inline-block但我正在尝试使用 flexbox ie 来做到这一点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>

4

1 回答 1

2

对齐 flex 容器中的最后一项可能会很棘手。目前在 flexbox 规范中没有用于定位行/列中的最后一项的内置属性或方法。

但是有很多技巧，包括使用不可见的弹性项目和伪元素来占据空间，从而实现所需的对齐。

这一切都包含在以下帖子中：

但是，您的布局可以通过 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>

密码笔

笔记：

  1. 建立块级网格容器。（规格参考）
  2. 启用网格以创建尽可能多的列，以适应屏幕 ( auto-fill)。每列的最小宽度可以是 200px，最大宽度可以是1fr（即空闲空间的比例；类似于flex-grow: 1）。（规格参考）
  3. 网格将自动创建新行以适应包装网格项目。每行的高度为 200px。（规格参考）
  4. grid-column-gap和的简写grid-row-gap。在每个网格项目周围设置 10 像素的“边距”。（规格参考）

浏览器对 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

于 2017-04-21T14:03:57.217 回答