居中flexbox項目

Question

我想中心我的flexboxes內容，但無論我嘗試似乎無法正常工作。

如：

align-items: center; 
-moz-align-items: center; 
-ms-flex-align: center; 
-webkit-align-items: center; 

justify-content: center; 
-moz-justify-content: center; 
-ms-flex-pack: center; 
-webkit-justify-content: center; 

這是我們一直在試圖對準柔性內容的模板： http://codepen.io/anon/pen/idzDE

你會看到所有的鏈接標箱＃我們一直在努力以柔性盒爲中心，並尚未得到它的工作。

Answer 1

您必須將您的.right li設置爲flexbox。

.right li { 
    box-sizing:border-box; 
    border:1px solid white; 
    text-align:center;  
    flex:1; 
    display:flex; //flexbox 
    align-items: center; //center ver. 
    justify-content: space-around; //center hor. 
} 

UPDATED

Answer 2

改變你的CSS這樣的：

/* Fonts */ 

/* Regular */ 
@font-face { 
    font-family: 'League Gothic'; 
    src: url('fonts/leaguegothic-regular-webfont.eot'); 
    src: url('fonts/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/leaguegothic-regular-webfont.woff') format('woff'), 
     url('fonts/leaguegothic-regular-webfont.ttf') format('truetype'), 
     url('fonts/leaguegothic-regular-webfont.svg#league_gothicregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 



html{ 
    height:100%; 
    width:100%; 
} 
*{ 
text-decoration:none; 
    list-style:none; 
} 
body{ 
    margin:0; 
    height:100%; 
    width:100%; 
    display:flex; 
    background:yellow; 

} 

nav,header a{ 
font-family:'League Gothic'; 
    font-size:1em; 
    color:white; 
} 

.left{ 
    display:flex; 
    flex-direction:column; 
    background:orange; 
    width:10%; 
} 

.left ul{ 
    padding:0; 
    margin:0; 
    display:flex; 
    flex:1; 
    flex-direction:column; 



} 

.left li{ 
    box-sizing:border-box; 
    border:1px solid white; 
    text-align:center; 
    flex:1; 
    margin: auto; 
} 

.left a{ 
    color:white; 


} 



.toolBar{ 
    background:steelblue; 
    height:50%; 
} 

.content{ 
    background:mediumseagreen; 
    width:100%; 
    overflow:scroll; 
    overflow-x: auto; 

} 

.right{ 
    display:flex; 
    background:orangered; 
    margin-left:auto; 
    height:100%; 
    width:10%; 
} 

.right ul { 
    padding:0; 
    margin:0; 
    display:flex; 
    flex:1; 
    flex-direction:column; 

} 

.right li { 
    margin: auto; 
    box-sizing:border-box; 
    border:1px solid white; 
    text-align:center; 
    padding:10% 

} 

.right a { 
color:white; 
    display:inline-block; 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 

} 
.topnav-toolbar{ 
    width:100%; 
    height:10%; 
} 

.topnav-toolbar ul{ 
    display:flex; 
    flex-direction:row; 
    padding:0; 
    margin:0; 
    height:100%; 


} 

.topnav-toolbar li { 
    box-sizing:border-box; 
    border:1px solid white; 
    text-align:center; 
    width:100%; 
    margin: auto; 

} 

.topnav{ 
    background:mediumspringgreen; 
    height:50%; 
} 


.right-content-topnav-toolbar{ 
    height:100%; 
    width:100%; 

} 

.right-content{ 
    display:flex; 
    width:100%; 
    height:90%; 
    flex-direction:row; 
} 

Codepen here