Flexbox中沿列方向的内联块

Question

我如何使具有display: inline-block的C，D，E仅占据它们在其中适合文本的空间，并且可以在Flexbox中彼此相邻（并排显示）哪个flex-direction设置为column？请注意，我不想将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

我认为解决此问题的最佳方法是说您要占据哪一行（宽度）为100％，然后让其他所有内容只占据一行。

您会注意到我添加了flex-wrap: wrap;，因此在需要时可以开始新的一行。

body {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

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

.a {
  background: cyan;
}

.b {
  background: yellow;
}

.c {
  background: orange;
}

.d {
  background: gray;
}

.e {
  background: pink;
}

.a,.b {
  width: 100%;
}

<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>

EDIT：我的回答与上述回答有很大不同，我是否误解了这个问题？

Answer 2

您可以使用flexbox属性来实现-代替inline-block使用align-self: center（或您认为合适的flex-start）

.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>