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的高度却增加或减少了。

您对保持高度恒定有什么建议吗？

谢谢。

顺便说一句：黑鸦图片来自：作者：en：User：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>

居中放置图像时，Flexbox高度会增加

1 个答案: