html - 将 flex-box 列中的项目与中间项目对齐

Question

在我的布局中，我在一列中有三个垂直堆叠的项目。我想要实现的是将列中的中间项目（绿色）居中，并将其他项目附加到该列中。

我有的：

.flex-row {
   display: flex;
   flex-direction: row;
}

.flex-col {
   display: flex;
   flex-direction: column;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
}

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

.flex-end {
  display: flex;
  justify-content: flex-end;
}

.col {
  width: 50px;
  min-height: 250px;
  margin: 5px;
}

.item {
  width: 40px;
  height: 40px;
  margin: 5px;
}

.long {
  height: 60px;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.green {
  background: green;
}
.yellow {
  background: yellow;
}

<div class="flex-row">
  <div class="red col flex-center">
    <div class="flex-col">
      <div class="blue item"></div>
      <div class="green item"></div>
      <div class="yellow item long"></div>
    </div>
  </div>
  <div class="red col flex-center">
    <div class="flex-col">
      <div class="blue item long"></div>
      <div class="green item"></div>
      <div class="yellow item"></div>
    </div>
  </div>
  <div class="red col flex-center">
    <div class="flex-col">
      <div class="blue item long"></div>
      <div class="green item"></div>
      <div class="yellow item long"></div>
    </div>
  </div>
</div>

我的目标是：

需要注意的是，中心项（绿色）具有固定的高度，而其他的高度（蓝色和黄色）由内容决定。我也可以在列上设置固定大小，但我希望它灵活并适应所包含项目的高度。

标签： htmlcssflexbox

Answer 1

您可以通过定位实现该布局，因为绿色框具有固定的高度。

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  height: 100%;
  position: relative;
}

.col {
  width: 50px;
  min-height: 250px;
  margin: 5px;
}

.item {
  width: 40px;
  height: 40px;
  margin: 5px;
}

.long {
  height: 60px;
}

.red {
  background: red;
}

.blue {
  background: blue;
  position: absolute;
  bottom: calc(50% + 25px); /* 5px for margin + green box's height / 2 */
}

.green {
  background: green;
  position: relative;
  top: 50%;
  transform: translateY(-50%)
}

.yellow {
  background: yellow;
  position: absolute;
  top: calc(50% + 25px); /* 5px for margin + green box's height / 2 */
}

<div class="flex-row">
  <div class="red col flex-center">
    <div class="flex-col">
      <div class="blue item"></div>
      <div class="green item"></div>
      <div class="yellow item long"></div>
    </div>
  </div>
  <div class="red col flex-center">
    <div class="flex-col">
      <div class="blue item long"></div>
      <div class="green item"></div>
      <div class="yellow item"></div>
    </div>
  </div>
  <div class="red col flex-center">
    <div class="flex-col">
      <div class="blue item long"></div>
      <div class="green item"></div>
      <div class="yellow item long"></div>
    </div>
  </div>
</div>