Flexbox align-items not working

Question

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

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

The div of concern is the one called 'topi'.

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

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.

I'm just not sure why the images aren't moving.

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

I would've thought that the images move along with the divs.

Can someone enlighten me on this?

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

.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;
}

<div class="container">
  <div class="top">
    <div class="topi">
      <img src="ham.jpg" width="209" height="205" alt="Picture of kid" />
      <img src="george.jpg" width="209" height="205" alt="Picture of kid" />
    </div>
    <div class="topi2">
      <p>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
      </p>
    </div>
  </div>
  <div class="bottom">
    <div class="bottomi">
    </div>
    <div class="bottomi2">
    </div>
    <div class="bottomi3">
    </div>
  </div>
</div>

Answer 1

There's no such thing as align-items: space-around.

You need align-content: space-around.

align-items applies to the alignment of flex items inside the flex line.

align-content applies to the alignment of flex lines inside the container.

Here's a more detailed explanation:

• How does flex-wrap work with align-self, align-items and align-content?