从底部开始生长 Flexbox 项

Question

我不敢相信我会问这个，因为它一定很简单。 但是我在 react-native 工作，我认为必须使用 flexbox，但我愿意接受建议。

*** 我知道 React Native 会使用视图而不是 Div，但这个问题实际上是关于 flexbox 的，我将无法为此使用网格。 虽然我也很好奇如何在网格中完成

使用以下标记：

<div class="container">
  <div class="icon">icon button number one</div>
  <div class="icon">an even larger text with stuff in it
two</div>
  <div class="icon">a large bit of text three</div>
</div>

和 css：

.container {
  display: flex;
  background-color: yellow;
  width: 500px;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  border: 3px black solid;
}
.icon {
  padding: 10px;
  background-color: black;
  color: white;
  margin: 10px;
}

我希望能够从底部动态地增加这个按钮“列表”。

当它站立时，容器内的 div 像这样排列

<an even larger text with stuff in it two> <icon button number one>
                                        <a large bit of text three>

但我希望他们像这样排队：

                                        <a large bit of text three>
<an even larger text with stuff in it two> <icon button number one>

当项目最终将被动态添加时，如何让项目自下而上增长？

https://codepen.io/sias/pen/ZEjmXBj

Answer 1

像这样？

 body, html { height: 100%; }.container { display: flex; justify-content: flex-end; width: 500px; flex-flow: column; height: 100%; outline: 3px black dotted; }.icon { margin-top: 12px; background-color: black; color: white; }

 <div class="container"> <div class="icon">icon button number one</div> <div class="icon">an even larger text with stuff in it two</div> <div class="icon">a large bit of text three</div> </div>

Answer 2

希望这就是你想要的，倒过来换行，开始和结束交换

.container {
  display: flex;
  justify-content:flex-end;
  background-color: yellow;
  width: 500px;
  flex-wrap: wrap-reverse;
  border: 3px black solid;
  
}
.icon {
  padding: 10px;
  background-color: black;
  color: white;
  margin: 10px;
}