列方向弹性框中的内联块答案

【问题标题】：Inline block in a flexbox in the column direction列方向弹性框中的内联块
【发布时间】：2017-03-08 14:40:07
【问题描述】：

如何使具有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>

【问题讨论】：

我不明白你的问题。你能进一步详细说明吗？你的意思是 c d e 在一个区块中？
尝试align-self: center 用于 c、d 和 e 而不是 inline-block？这是预期的行为吗？
flex 容器的子项是 flex 项（它也是伪项）。这是 very special 的同义词 :) inline-block 对它们没有任何影响，除了 solving a flexbug with IE10。只有绝对定位和display: none 有效果，还有一堆flex properties（换行，宽度的增长/收缩/基础，在主轴和交叉轴上，换行时的行间距等）

标签： html css flexbox vertical-alignment

【解决方案1】：

您可以使用 flexbox 属性 itslef 来做到这一点 - 而不是 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>

【讨论】：

感谢align-self，你拯救了我的一天！

【解决方案2】：

我认为解决此问题的最佳方法是说出您要占用 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>

编辑：我的回答和上面的很不一样，我是不是误解了这个问题？

【讨论】：