我为响应式页面的 flexbox 设置了最大宽度和高度。在它超过最大高度和宽度后,即使我的 .flex-container
上有 justify-content: center;
框也不再位于页面中心.我在这里做错了什么?有什么帮助,谢谢!
CodePen
.flex-container {
display:flex; justify-content: center;}
.flex-post {
background-color: #f1f1f1;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
flex: 1 0 auto;
height:auto;
max-height:270px;
max-width:270px;}
.flex-post:before {
content:'';
float:left;
padding-top:100%;}
.flex-post:hover {
background-color: rgba(1,1,1,0.5);}
<div>
</div>
<div class="flex-container">
<div class="flex-post">1</div>
<div class="flex-post">2</div>
<div class="flex-post">3</div>
</div>
<div class="flex-container">
<div class="flex-post">4</div>
<div class="flex-post">5</div>
<div class="flex-post">6</div>
</div>
<div class="flex-container">
<div class="flex-post">7</div>
<div class="flex-post">8</div>
<div class="flex-post">9</div>
</div>
最佳答案
您需要将容器居中。
将此添加到您的代码中:
body {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
height: 100vh;
margin: 0;
}
请注意,默认情况下, block 元素占用其父元素的整个宽度。但是,此行为不会扩展到高度 ( more details)。
关于html - 最大高度后页面中心的 flexbox ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49519371/