如何让元素从下往上流动？答案

【问题标题】：How to make elements flow from bottom to top?如何让元素从下往上流动？
【发布时间】：2014-01-05 19:21:56
【问题描述】：

在 CSS 中有没有办法让元素表现得像右边的图片？元素的顺序并不那么重要，但是当人们调整页面大小时，图块需要从下向上而不是自上而下占据空间。

  NORMAL         DESIRED
|---------|    |---------|
| A B C D |    | I       |
| E F G H |    | E F G H |
| I       |    | A B C D |
|---------|    |---------|

示例代码：

<html>
    <head>

      <style>
        .container {
          margin:10px;
          border:1px solid black;
          float:left;
        }

        .tile {
          width:100px;
          height:100px;
          border:1px solid black;
          margin:5px;
          float:left;
          font-size: 50px;
          text-align: center;
          line-height: 100px;
          vertical-align: middle; 
        }

      </style>

    </head>
    <body>
        <div id="container-1" class="container">
          <span class="tile">1</span>
          <span class="tile">2</span>
          <span class="tile">3</span>
          <span class="tile">4</span>
          <span class="tile">5</span>
          <span class="tile">6</span>
          <span class="tile">7</span>
          <span class="tile">8</span>
          <span class="tile">9</span>
        </div>
    </body>
</html>

【问题讨论】：

我知道如果你在让它们inline-block 时将其浮动到右侧，将使它们从最后一个到第一个排序（尽管是连续的）。也许这可以产生一些想法？

标签： css alignment

【解决方案1】：

跳出框框思考：

.container, .tile {
    transform:rotate(180deg);         /* Moz and IE10+ */
    -ms-transform:rotate(180deg);     /* IE9 */
    -webkit-transform:rotate(180deg); /* Opera/Chrome/Safari */
}

是的，这确实有效：

.container {
  margin:10px;
  border:1px solid black;
  float:left;
  transform:rotate(180deg);
}
.tile {
  width:100px;
  height:64px;
  border:1px solid black;
  margin:5px;
  float:right;
  font-size: 40px;
  text-align: center;
  line-height: 64px;
  vertical-align: middle; 
  transform:rotate(180deg);
}

<div id="container-1" class="container">
  <span class="tile">1</span>
  <span class="tile">2</span>
  <span class="tile">3</span>
  <span class="tile">4</span>
  <span class="tile">5</span>
  <span class="tile">6</span>
  <span class="tile">7</span>
  <span class="tile">8</span>
  <span class="tile">9</span>
</div>

首先将容器旋转 180 度以获得所需的布局，然后 float:right 翻转它们的左/右顺序，然后将图块再次旋转 180 度以达到预期的效果。

【讨论】：

@Abernasty erm 你读过 CSS cmets 吗？几乎是every browser，除了 IE
嗯，这就是我认为的情况，虽然我鄙视 IE8，但它仍然很流行，如果它不支持它，通常对我来说是一个交易破坏者（至少如果它意味着解决方案不再是核心问题）
在最坏的情况下它会回滚到默认布局 - 无法想象这在许多情况下真的是破坏性行为。
我认为（好吧，它适用于我的特定情况）父容器和子元素上的transform:scaleY(-1) 的作用相同，不需要float:right 位。无论如何，答案都很好。

【解决方案2】：

我能想到的仅使用 CSS 的最佳解决方案是在特定断点处使用 media queries，并设计 2-4 个（取决于您想要多少个断点，它可能是更多）理想配置。

考虑理想的配置，然后您可以为您的内容图块指定特定的 id，以在每个断点更改它们的样式/宽度。例如，

<head>

  <style>
    .container {
      margin:10px;
      border:1px solid black;
      float:left;
    }

    .tile {
      width:100px;
      height:100px;
      border:1px solid black;
      margin:5px;
      float:left;
      font-size: 50px;
      text-align: center;
      line-height: 100px;
      vertical-align: middle; 
    }
@media all and (max-width: 699px) and (min-width: 520px) {
  #tileOne {
    width: 100%;
  }
  #tileTwo {
    width: 50%;
  }
}
  </style>

</head>
<body>
    <div id="container-1" class="container">
      <span class="tile" id="tileOne">1</span>
      <span class="tile" id="tileTwo">2</span>
      <span class="tile">3</span>
      <span class="tile">4</span>
      <span class="tile">5</span>
      <span class="tile">6</span>
      <span class="tile">7</span>
      <span class="tile">8</span>
      <span class="tile">9</span>
    </div>
</body>

此技术将完全是手动的，因此可能不适用于动态内容，除非您还想利用 css-child-selectors，为了向后兼容最好使用 jQuery 来完成。但是因为它是完全手动的，所以它还可以让您完全控制进度。

与 Niels 的解决方案一样，如前所述，这在 IE9 下不起作用，因为不支持媒体查询。

【讨论】：

【解决方案3】：

还有另一种方法可以做到这一点。您可以使用 CSS3 的 flex-wrap 属性来实现您正在寻找的输出。

.container{
    display: flex;
    flex-wrap: wrap-reverse;
}

Example

【讨论】：