Text-align：center;忽略顯示：flex元素？

Question

對於以下情況，錨文本不居中。如果我將錨的顯示從flex更改爲block，則文本居中。爲什麼是這樣？

我只在Chrome上測試過。

<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

注意：在你走之前提前閱讀我的回答，我想你 通知我不使用任何專有的前綴，如果 不適合工作你，它的時間來更新你的瀏覽器，或嘗試添加 前綴，如-moz或-webkit，看看它是否適合你。

做正確的方法是使用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; 
} 

Demo

您正在使用a標籤固定的寬度即width: 200px;，並且這會破壞flex佈局的想法，因此請將其解決，並使用我提供的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; 
} 

Demo（調整你的窗口看到效果）

樣品1中，被包裝的元件將伸展到整個寬度

---

樣品2，元素同樣包裹進一步

另外請注意，我正在使用min-width: 100px;上li元素，以強制包裹在示範

---

當你評論說，你想在每行三裏，而不是使用flex-grow: 1;比你需要使用flex: 1 1 33%;像

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

Demo

樣品3，在每行上

樣品4，在調整大小即使

在進一步的調整大小的每一行裏的相同數量裏將等量的，它們將自動地適應說兩個一排和一排..