Text-align: center; ignored to display: flex element?

Question

For the following text, the anchor is not centered. If I changed the binding display from flex to lock, then the text will be centered. Why is this?

I tested only Chrome at the moment.

<ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>



*, *:before, *:after {
  -moz-box-sizing: border-box; 
  -webkit- box-sizing: border-box;   box-sizing: border-box;
 }

ul {
  display: flex;
  flex-flow: row wrap;
  padding: 0;
  width: 40%;
  margin: auto;
  border: 1px solid gold;
}
li {
  list-style-type: none;
}
a {
  background: grey;
  width: 200px;
  border: 1px solid red;
  text-align: center;
  display: flex;
}

http://codepen.io/anon/pen/dgmbH

Answer 1

Note. Before you get to my answer, I would like you to let me know that I don’t use any of the ENTREPRENEURS, if this does not work for you, it’s time to update your browser or try adding type prefixes -mozor -webkitand see if it works for you .

- display: flex; ul flex-grow li...

ul {
  display: flex;
  padding: 0;
  width: 40%;
  margin: auto;
  border: 1px solid gold;
}

li {
  list-style-type: none;
  flex-grow: 1;
}

a i.e width: 200px;, , CSS , .

flex-grow 1, li width

---

, , ul,

ul {
  display: flex;
  padding: 0;
  width: 40%;
  margin: auto;
  border: 1px solid gold;
  flex-direction: row;
  flex-flow: row wrap;
}

( , )

1,

---

2, ,

, min-width: 100px; li

---

, li , flex-grow: 1; flex: 1 1 33%;

li {
  list-style-type: none;
  flex-grow: 1;
  min-width: 100px;
  flex: 1 1 33.33%;
}

3, li

4, li ,

, ..