使用flexbox

Question

我需要使用 flexbox 进行以下设计。由于编程要求，我无法使用表或 dispay：table

我无法垂直居中并在所有容器中保持相同的高度：

https://jsfiddle.net/kurtko/2fq6kn6m/

我试图使用物品：

align-self:center;

或容器：

align-items:center;

但是我在所有容器中都失去了相同的高度。

有什么想法吗？

Answer 1

您可以在display: flex align-items: center justify-content: center

上添加.one .small .medium

.item {
  display: flex;
  text-align: center;
}
.one,
.small,
.medium {
  display: flex;
  align-items: center;
  justify-content: center;
}
.one {
  align-items: flex-start;
}
.one {
  width: 39%;
  margin-right: 1%;
  background-color: black;
  color: white;
}
.two {
  width: 29%;
  margin-right: 1%;
}
.three {
  width: 40%;
}
.medium {
  background-color: grey;
  color: white;
  margin-bottom: 3px;
  height: 200px;
}
.small {
  background-color: #c0b55a;
  color: white;
  margin-bottom: 3px;
  height: 100px;
}

<div class="item">

  <div class="one">
    Top
  </div>

  <div class="two">
    <div class="medium">Center</div>
    <div class="medium">Center</div>
  </div>

  <div class="three">
    <div class="small">Center</div>
    <div class="small">Center</div>
    <div class="small">Center</div>
    <div class="small">Center</div>
  </div>

</div>

Answer 2

检查 demo
我只是更新你错过的第一个div。 已添加到one：

.one{
 align-items: center;
  justify-content: center;
  display: flex;
}