Align-elements: center; Does not work properly

Question

I just read David's article HERE and decided to try flexbox, and so I did the following my example:

<div class="wrpr">

        <div></div>
        <div></div>
        <div></div>
        <div></div>

</div>

CSS

.wrpr {
    display: flex;
    border: 5px solid tomato;
    height: 300px;
    align-items:center;
    flex-wrap:wrap;
}

.wrpr div {
    background: #eee;
    height: 50px;
    width: 49%;
    margin: 0 .5%;
}

.wrpr div:nth-child(odd) {
    background: #727272;
}

FIDDLE HERE

Now the annoying part is that the 4 divs are not exactly centered, but rather spaced. Why is this happening?

I believe this is a typical problem for beginners, for someone switching to flexbox, but I really can not find a solution to this problem.

can someone help me understand why it align-items:center;is not working as intended?

Answer 1

align-content . align-items . :

.wrpr {
  display: flex;
  border: 5px solid tomato;
  height: 300px;
  align-items: center;
  align-content: center; /* new */
  flex-wrap: wrap;
}

DEMO

align-content

align-content , , , justify-content . . flex . ( )