I can't believe I am asking this because it must be quite simple. But am working in react-native and have to use flexbox I think for this, but I am open to suggestions.
*** I realize react native would be using Views and not Divs but this question is really about flexbox and I will not be able to use grid for this. Although I am curious how it would be done in grid also
With the following markup:
<div >
<div >icon button number one</div>
<div >an even larger text with stuff in it
two</div>
<div >a large bit of text three</div>
</div>
and 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;
}
I am hoping to dynamically be able to grow this 'list' of buttons from the bottom.
As it stands the divs inside the container line up like this
<an even larger text with stuff in it two> <icon button number one>
<a large bit of text three>
But I want them to line up like this:
<a large bit of text three>
<an even larger text with stuff in it two> <icon button number one>
How do I get the items to grow from the bottom up when they will eventually be added dynamically?
https://codepen.io/sias/pen/ZEjmXBj
CodePudding user response:
hope this is what you want wrap reverse just upside down and start and end swapped
.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;
}
CodePudding user response:
Like this?
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 >
<div >icon button number one</div>
<div >an even larger text with stuff in it
two</div>
<div >a large bit of text three</div>
</div>