如何将 `<div>` 内的锚定反转到底部而不是顶部？答案

【问题标题】：How to invert the anchoring inside a `<div>` to the bottom instead of the top?如何将 `<div>` 内的锚定反转到底部而不是顶部？
【发布时间】：2016-01-27 19:00:25
【问题描述】：

我正在构建一个聊天应用程序，并且需要将消息锚定到消息索引的底部并长大，而不是挂在消息索引的顶部。我是在 react 中构建的，所以下面的代码实际上是 JSX。

消息索引：

        <div className="chat-message-index">
         {this.state.activeChannel.messages.map(function(message{
           return <Message key={message.sid} message={message} />;
            })}
        </div>

消息（在索引内呈现）：

<div className="chat-message">
  <b className="name">{this.state.author}</b><br/>
  <span dangerouslySetInnerHTML={{__html: this.state.message.body}} />
</div>

CSS：

.chat-message-index {
  height: calc(~"100vh - 250px");
  position: absolute;
  overflow-y: scroll;
  width: 100%;
  background-color: silver;
  display: list-item;
}

.chat-message {
  position:relative;
  padding:10px;
  margin:22px 45px 22px 20px;
  color:#fff;
  background:#43464b;
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#aeb5ba), to(#43464b));
  background:-moz-linear-gradient(#aeb5ba, #43464b);
  background:-o-linear-gradient(#aeb5ba, #43464b);
  background:linear-gradient(#aeb5ba, #43464b);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

我已经尝试了我能想到的每一个 CSS 技巧，我通过谷歌搜索和在 SO 上找到的每一个想法，但我找不到任何东西。我得到的最接近的是在消息索引和消息上都使用transform:rotate(180deg);，但这会反转滚动并导致滚动条出现在索引的左侧，这不起作用。我可能可以使这种方法奏效，但感觉非常笨拙，我的直觉是它会在路上引起头痛......

有人知道如何简单地反转<div> 的锚定吗？我只想让第一条消息显示在消息索引<div> 的底部，然后将每条附加消息堆叠在之前的<div> 之上。

【问题讨论】：

可能是一个 javascript 解决方案，你可以颠倒 div 的顺序，你不能单独使用 CSS 来颠倒顺序 AFAIK
或者你可以不附加新消息，而是将它们放在前面，这样它们将“高于”最后一条消息
@Aziz 是的……你可以。看我的回答。

标签： javascript css react-jsx

【解决方案1】：

Flexbox 可以做到这一点：

.chatbox {
  margin: 1em auto;
  width: 150px;
  height: 500px;
  border: 1px solid grey;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  text-align: center;
}
.message {
  background: lightgreen;
  margin-bottom: .25em;
  padding: .25em 0 0 0;
  border-bottom: 2px solid green;
}

<div class="chatbox">
  <div class="message">MESSAGE 1</div>
  <div class="message">MESSAGE 2</div>
  <div class="message">MESSAGE 3</div>
  <div class="message">MESSAGE 4</div>
  <div class="message">MESSAGE 5</div>
  <div class="message">MESSAGE 6</div>
  <div class="message">MESSAGE 7</div>
  <div class="message">MESSAGE 8</div>
  <div class="message">MESSAGE 9</div>
  <div class="message">MESSAGE 10</div>
  <div class="message">MESSAGE 11</div>
  <div class="message">MESSAGE 12</div>
</div>

【讨论】：

这是什么魔法？顺便说一句，顶部的空格呢
谢谢。这正是我想要的。
@Aziz 是聊天框的一部分，它的高度：500px;

【解决方案2】：

你可以尝试两件事：

[css] 将flexbox 与flex-direction: column-reverse 一起使用。有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction。他们的example 完全符合您的要求。
[js] 对您的消息列表进行排序，以便最顶部的项目位于索引 0 处，而最旧的项目位于索引 last 处。不过，这不如上面的 css 解决方案干净。

【讨论】：