Question

我试图将内容集中在我的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

您会看到标有框＃的所有链接，我们一直试图以灵活方框为中心，但还没有让它发挥作用。

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

居中flexbox项目

2 个答案: