html - 图像居中时 Flexbox 高度增加

Question

我有以下代码示例:

html,
body {}

.container {
  display: flex;
  flex-direction: rows;
  flex-wrap: wrap;
  flex-direction: rows;
  justify-content: center;
  vertical-align: middle;
  height: 160px;
  width: 160px;
}

.center {
  align-self: center;
}

.whitebox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50%;
  background-color: #bf8040;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50%;
  background-color: #4d2600;
}

<div class="container">
  <div class="whitebox"><img class="center" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Chess_rdt60.png"></img>
  </div>
  <div class="box"> </div>
  <div class="box"> </div>
  <div class="whitebox"> </div>
</div>

所以我想把宽高为60px的图片放到宽高为80px的flexbox中，应该没问题。然而，尽管我放置了 justify-content: center，但不同盒子的 flexbox 高度会增加和减少。

为了保持高度不变，您有什么建议吗？

提前致谢。

顺便说一句:黑车图片来自:作者:用户:Cburnett - 文件:Chess rdt45.svg，CC BY-SA 3.0，https://commons.wikimedia.org/w/index.php?curid=20363786

Answer 1

因为您没有在 flex 元素上设置任何高度，所以它们会自然地调整到它们的内容大小。第一排的车比第二排空的多，所以第一排高。

将此添加到您的代码中:

.whitebox { height: 50%; }

.container {
    display: flex;
    flex-wrap: wrap;
    height: 160px;
    width: 160px;
 }

.whitebox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50%;
    background-color: #bf8040;
    height: 50%; /* new */
 }

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50%;
    background-color: #4d2600;
 }

<div class="container"> 
    <div class="whitebox"><img class="center" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Chess_rdt60.png">     </div>
    <div class="box"> </div>
    <div class="box"> </div>
    <div class="whitebox"> </div>
</div>