Html Flexbox布局-将项目移出文档流并在屏幕中居中
我正在努力学习flexbox。在我的示例中,我希望将灰框(联系人框)从文档中的自然位置移动到页面的中心 前两项(蓝色列和绿色列)各为50%的宽度,并拉伸以填充屏幕 见图: HTML:Html Flexbox布局-将项目移出文档流并在屏幕中居中,html,css,flexbox,Html,Css,Flexbox,我正在努力学习flexbox。在我的示例中,我希望将灰框(联系人框)从文档中的自然位置移动到页面的中心 前两项(蓝色列和绿色列)各为50%的宽度,并拉伸以填充屏幕 见图: HTML: 请使用“.container column:nth child(3)”类内容,如下所示,您将得到结果 .container-column:nth-child(3) { background-color: grey; height: 30px; width: 30%; position: a
请使用“.container column:nth child(3)”类内容,如下所示,您将得到结果
.container-column:nth-child(3) {
background-color: grey;
height: 30px;
width: 30%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
使用
位置:固定代码>和你们应该在你们的方式。我不认为这可以用flex做,因为你们坐在其他2列的顶部,你们需要使用绝对定位-是的…flexbox不能这样做。
body {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
color: #fff;
}
#container-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
justify-content: center;
width: 100%;
}
.container-column {
width: 50%;
padding: 4em;
}
#main-nav-list {
display: inline-flex;;
flex-wrap: wrap;
flex-direction: row;
list-style: none;
}
#main-nav-list li {
margin-right: 1em;
}
.solid-bkg {
background-color: #0C3134;
}
.pic-bkg {
background-color: blue;
}
.container-column:nth-child(3){
background-color: grey;
height: 30px;
width: 30%;
}
.container-column:nth-child(3) {
background-color: grey;
height: 30px;
width: 30%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}