Using CSS Flex to achieve a layout is not working

Question

I'm using flex: 0 0 50%; and the desired layout should looks like this:

However, it's just not working, what am I doing wrong?

#ct {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  width: 500px;
}

.responsive {
  width: 100%;
  min-width: 0;
  margin: 15px;
  flex: 0 0 50%;
}

<div id="ct">
  <img class="responsive" src="http://via.placeholder.com/1600x900">
  <img class="responsive" src="http://via.placeholder.com/1600x900">
  <img class="responsive" src="http://via.placeholder.com/1600x900">
</div>