html - 在列方向上的 flexbox 中的内联 block

Question

如何使具有 display: inline-block 的 C、D、E 只占用它们需要的空间以适应它们内部的文本，并且可以彼此相邻显示(并排成一行)在一个 flex-direction 设置为 column 的 flexbox 中？请注意，我不想将 C、D、E 包装在容器中以获得所需的结果

body {
  padding: 0;
  margin: 0;
}

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

.a,.b,.c,.d,.e {
  height: 50px;
  line-height: 50px;
  border: 1px solid;
  text-align: center;
}

.c,.d,.e {
  display: inline-block;
}

.a {
  background: cyan;
}

.b {
  background: yellow;
}

.c {
  background: orange;
}

.d {
  background: gray;
}

.e {
  background: pink;
}

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
</div>

Answer 1

您可以使用 flexbox 属性 itslef - 而不是 inline-block 使用 align-self: center (或 flex - 按照你认为合适的方式开始)

.c,.d,.e {
  align-self: center;
}

请看下面的演示:

body {
  padding: 0;
  margin: 0;
}

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

.a,.b,.c,.d,.e {
  height: 50px;
  line-height: 50px;
  border: 1px solid;
  text-align: center;
}

.c,.d,.e {
  align-self: center;
}

.a {
  background: cyan;
}

.b {
  background: yellow;
}

.c {
  background: orange;
}

.d {
  background: gray;
}

.e {
  background: pink;
}

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
</div>