居中flexbox项目
我试图将内容集中在我的柔性盒中，但是我尝试的任何东西似乎都不起作用。
如：
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;
这是我们一直试图对齐flex内容的模板：http://codepen.io/anon/pen/idzDE
你会看到所有标有box＃的链接，我们一直试图将其放在弹出框中，并且尚未使其工作。
您必须将.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.
}
更新
改变你的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在这里
链接地址: http://www.djcxy.com/p/76035.html