内联级元素被强制转换为flexbox中的新行

Question

为什么<strong>元素(内联元素)被强制换行？

这个设置在flex中有一个flex,没什么特别疯狂的我不会想到的.所以也许这只是我对flexbox工作方式的误解.

看看:http://codepen.io/leads/pen/mEYOay

* {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  border: 1px solid red;
  height: 200px;
  max-width: 600px
}
.left {
  flex: 1;
  background: rgba(0, 0, 0, .3);
}
.middle {
  flex: 0 0 200px;
  background: rgba(0, 0, 0, .4);
  text-align: center;
  display: flex;
  flex-direction: column;
}
.middle button {
  flex: 0 0 50px;
}
.middle p {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}
strong {
  background: red;
}
.right {
  text-align: center;
  flex: 0 0 100px;
  background: rgba(0, 0, 0, .5);
}

<div class="container">
  <div class="left">
    <p>some content in the top left</p>
  </div>
  <div class="middle">
    <p>Lorem ipsum <strong>dolor</strong> sit amet, consectetur adipisicing elit.
    </p>
    <button>CTA</button>
  </div>
  <div class="right">
    <p>CTA</p>
  </div>
</div>

Answer 1

该<strong>元素是 flex 容器中的子元素flex-direction: column。

因此，它将与其同级（包括匿名 flex items，就像在您的代码中一样）垂直堆叠。

另请注意：

• 当元素是 flex 容器的子元素时，它们的显示值是blockified。
• 换句话说，display: inline,display: table等将成为flex 格式上下文display: block的规则。

作为替代方案，您可以使用弹性auto边距来创建布局：

* {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  border: 1px solid red;
  height: 200px;
  max-width: 600px
}
.left {
  flex: 1;
  background: rgba(0, 0, 0, .3);
}
.middle {
  flex: 0 0 200px;
  background: rgba(0, 0, 0, .4);
  text-align: center;
  display: flex;
  flex-direction: column;
}
.middle button {
  flex: 0 0 50px;
  margin-top: auto;   /* NEW */
}
.middle p {
  margin-top: auto;   /* NEW */
}
strong {
  background: red;
}
.right {
  text-align: center;
  flex: 0 0 100px;
  background: rgba(0, 0, 0, .5);
}

<div class="container">
  <div class="left">
    <p>some content in the top left</p>
  </div>
  <div class="middle">
    <p>Lorem ipsum <strong>dolor</strong> sit amet, consectetur adipisicing elit.
    </p>
    <button>CTA</button>
  </div>
  <div class="right">
    <p>CTA</p>
  </div>
</div>

修订代码笔