繁体   English   中英

从底部开始生长 Flexbox 项

[英]Grow Flexbox items from the bottom

我不敢相信我会问这个,因为它一定很简单。 但是我在 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

像这样?

 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>

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

.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;
}
①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM