Question

以下是我的问题的一个简单示例。

我有一系列div，我想在4列网格中显示，但是以相反的顺序从左上角的圣诞老人猫开始。这似乎是flex-wrap: wrap-reverse;的工作但使用flexbox结果在一个不完整的顶行。如果你不反转div顺序，我宁愿你有一个不完整的底行。

我应该尝试除flexbox之外的东西吗？

谢谢

这是我的代码：

HTML

<div class="container">
  <div class="item">
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </div>
  <div class="item">
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </div>
  <div class="item">
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </div>
  <div class="item">
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </div>
  <div class="item">
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </div>
  <div class="item">
    <img src="http://www.wallpapermania.eu/images/lthumbs/2012-04/412_kitty-cat.jpg" />
  </div>
</div>

CSS

body {
  background-color: #2d2d2d;
}

.container {
  width: 1024px;
  display: flex;
  flex-wrap: wrap-reverse;
  background-color: #ffffff;
  padding: 1em;
  margin: 1em auto;

  .item {
    height: 10em;
    width: 24%;
    padding: 0.5em;
    box-sizing: border-box;
    border: 1px solid black;

    img {
      width: 100%;
    }
  }
}

Answer 1

flex-wrap: wrap-reverse只反过来沿横轴包裹内容。

您还需要添加：flex-direction: row-reverse以反向排列沿主轴的内容。

当项目数不是四的倍数时，这仍然会让您遇到问题。要解决此问题，我们可以使用nth-last-child和first-child css选择器，根据项目数量为最后一个元素添加边距。

  :nth-last-child(4n+3):first-child {
    margin-right: 25%;
  }

  :nth-last-child(4n+2):first-child {
    margin-right: 50%;
  }

  :nth-last-child(4n+1):first-child {
    margin-right: 75%;
  }

完整的CSS：

body {
  background-color: #2d2d2d;
}

.container {
  width: 1024px;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
  background-color: #ffffff;
  padding: 1em;
  margin: 1em auto;

  :nth-last-child(4n+3):first-child {
    margin-right: 25%;
  }

  :nth-last-child(4n+2):first-child {
    margin-right: 50%;
  }

  :nth-last-child(4n+1):first-child {
    margin-right: 75%;
  }

  .item {
    height: 10em;
    width: 25%;
    padding: 0.5em;
    box-sizing: border-box;
    border: 1px solid black;

    img {
      width: 100%;
    }
  }
}

此处更新了Codepen： https://codepen.io/roboreilly/pen/ZoBZge

Answer 2

既然你正在使用sass，也许你可以做这样的事情，如果你能预料到你将拥有的最大列表项数（在这种情况下为10）：

@for $i from 0 through 10 {
  .container .item:nth-child(#{$i}) {
    order: -$i;
  }
}

我修改了您的代码here

你能使用flexbox的wrap-reverse来反转网格中的一系列div，但仍然有一个完整的顶行？

2 个答案: