居中 flexbox 项目答案

【问题标题】：Centering flexbox items居中 flexbox 项目
【发布时间】：2014-10-21 18:25:09
【问题描述】：

我正在尝试使我的弹性框中的内容居中，但无论我尝试什么似乎都不起作用。

如：

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# 的链接，我们一直试图在弹性框中居中，但还没有让它工作。

【问题讨论】：

标签： html css templates center flexbox

【解决方案1】：

您还必须将.right li 设置为弹性框。

.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

【讨论】：

【解决方案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

【讨论】：

对于投反对票的人来说，很高兴知道为什么，因为它完全符合问题的要求，如 Codepen 所示。如果这个答案是错误的，请解释原因