title: React native flexbox how to align items vertically?
body: <p>I'm a bit confused as to why this flex won't work.</p>
  
  <pre><code> &lt;View
  style={{
      display: "flex",
      flexWrap: "wrap"
  }}
  &gt;
  &lt;View style={{ width: "40%", alignSelf: "flex-start" }}&gt;
      &lt;Button BUY&lt;/Button&gt;
      &lt;View style={{ alignSelf: "center", marginTop: "2%" }}&gt;// A logo&lt;/View&gt;
  &lt;/View&gt;
  &lt;View style={{ width: "40%", alignSelf: "flex-end" }}&gt;
      &lt;AreaChart
          style={{ height: 250 }}
          dataPoints={data}
          contentInset={{ top: 30, bottom: 30 }}
          curve={shape.curveNatural}
          svg={{
              fill: "rgba(134, 65, 244, 0.2)",
              stroke: "rgb(134, 65, 244)"
          }}
      /&gt;
  &lt;/View&gt;
  &lt;/View&gt;;
  </code></pre>
  
  <p>The intended layout I want to have is:</p>
  
  <pre><code>BUTTON  |   &lt;CHART
  LOGO    |   CHART&gt;
  </code></pre>
  
  <p>The button and logos centered together, and the chart taking up both "boxes" on the right.</p>
  
  <p>However, the above markup produces the following:</p>
  
  <pre><code>BUTTON |
  LOGO   |
         | CHART
         | CHART
  </code></pre>
  
  <p>They're doing the right thing but the Chart starts where the logo ends.</p>
  
  <p>Where did I go wrong with flexbox? How do I produce the right layout?</p>