Высота 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>

Поэтому я хочу поместить изображение с шириной и высотой 60 пикселей в flexbox шириной и высотой 80 пикселей, что не должно быть проблемой.Однако высоты flexbox увеличиваются и уменьшаются для разных боксов, хотя я поместил justify-content: center.

Есть ли у вас какие-либо предложения, чтобы сохранить постоянную высоту?

Заранее спасибо.

Кстати: изображение черной ладьи от: Автор: Пользователь: 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>