Question 33131 in React native Question posted in
The official React Native documentation can be found here.

Grow Flexbox items from the bottom – React native

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 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>

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

Tags:

2

Answers


  1. 0

    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 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>
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search