最大高度

Question

我为灵活方框设置了响应页面的最大宽度和高度。超过最大高度和宽度后，即使我justify-content: center;上有.flex-container，框也不再位于页面中央。我在这做错了什么？什么都有帮助，谢谢！ 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>

Answer 1

你需要集中容器。

将此添加到您的代码中：

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    height: 100vh;
    margin: 0;
}

revised codepen

请注意，默认情况下，块元素会占用其父元素的整个宽度。但是，此行为不会扩展到高度（more details）。

Answer 2

.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;
  display: flex;
  align-items: center;
  justify-content: center;
}