[英]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>
当项目最终将被动态添加时,如何让项目自下而上增长?
像这样?
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.