Flexbox align-items not working
<p>So I am facing a little issue where the pictures aren't moving according to the <code>align-items</code> property in flexbox and I'm not sure why.</p>

<p>They just act as if I've applied <code>align-items: flex-start</code>, when I've set the width of my elements as <strong>35%</strong> and the height to <strong>100%</strong>.</p>

<p>The div of concern is the one called <code>'topi'</code>. </p>

<p>To sum up what layout I was going for (although it's slightly irrelevant but may help with this question): </p>

<p>I want two parent rows in the parent div. The top row has two sections and I want the bottom row to have 3+ sections columns.</p>

<p>I'm just not sure why the images aren't moving.</p>

<p>I mean I made the divs that the images were in flexboxes as well, although I thought that was irrelevant since making <code>'topi'</code> class have the property <code>align-items: center/space-around</code>, it should work on the divs that contain the images.</p>

<p>I would've thought that the images move along with the divs. </p>

<p>Can someone enlighten me on this?</p>

<p>P.S. Is the <code>topi</code> div rule useless because the images are in the divs so just a rule for <code>topi</code> should suffice, right? Thank you.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch;
  height: 95vh;
  width: 80%;
  margin: 5% auto 8% auto;
  background-color: white;
}
.top {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: center;
}
.bottom {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.bottomi {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  background-color: red;
}
.topi {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: space-around;
  width: 35%;
  height: 100%;
  ;
  background-color: white;
}
.topi div {
  display: flex;
  width: 100%;
  height: auto;
}
.topi2 {
  width: 65%;
  height: 100%;
  ;
  background-color: yellow;
  font-size: 20px;
}
.top,
.bottom {
  width: 100%;
  background-color: green;
}
.top {
  height: 60%;
}
.bottom {
  height: 40%;
}
.top {
  border: 1px solid green;
}
.bottom {
  border: 1px solid pink;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div class="top"&gt;
    &lt;div class="topi"&gt;
      &lt;img src="ham.jpg" width="209" height="205" alt="Picture of kid" /&gt;
      &lt;img src="george.jpg" width="209" height="205" alt="Picture of kid" /&gt;
    &lt;/div&gt;
    &lt;div class="topi2"&gt;
      &lt;p&gt;Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sampleSample sample sample Sample sample sample
        Sample sample sample Sample sample sample
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="bottom"&gt;
    &lt;div class="bottomi"&gt;
    &lt;/div&gt;
    &lt;div class="bottomi2"&gt;
    &lt;/div&gt;
    &lt;div class="bottomi3"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>