Text-align: center; ignored for display: flex element? - html

Question

For the following the anchor text isn't centered. If I change the anchor's display from flex to block then the text is centered. Why is this?
Ive only tested on Chrome so far.
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</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 go ahead to read my answer, I would like you to
notify that am not using any of the PROPRIETARY PREFIXES, if it
doesn't work for you, its time to update your browser, or try adding
the prefixes like -moz or -webkit and see if it works for you.
The correct way to do is to use display: flex; for the ul element and flex-grow on li elements...
ul {
display: flex;
padding: 0;
width: 40%;
margin: auto;
border: 1px solid gold;
}
li {
list-style-type: none;
flex-grow: 1;
}
Demo
You are using a fixed width on a tag i.e width: 200px; and that kills the idea of flex layout, so take that out, and alter your CSS with the one provided by me.
Here, I've used flex-grow with a value of 1 so that each of the li element shares the equal amount of width
If you are looking to wrap the cells if they exceed the containers width, than you need to use the following properties on ul element like
ul {
display: flex;
padding: 0;
width: 40%;
margin: auto;
border: 1px solid gold;
flex-direction: row;
flex-flow: row wrap;
}
Demo (Resize your window to see the effect)
Sample 1, the wrapped element will stretch to full width
Sample 2, Elements wrapped equally further
Also note that am using min-width: 100px; on li elements to force wrap in the demonstration
As you commented that you wanted three li on each row, than instead of using flex-grow: 1; you need to use flex: 1 1 33%; like
li {
list-style-type: none;
flex-grow: 1;
min-width: 100px;
flex: 1 1 33.33%;
}
Demo
Sample 3, Equal number of li on each row
Sample 4, Equal number of li on each row even when resized
On further resize, they will accommodate automatically say two in a row and one in a row..