html - 内联级元素被强制到 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 容器中的一个 child flex-direction: column .

因此，它将与其 sibling 垂直堆叠(包括 anonymous flex items，就像在您的代码中一样。)

另请注意:

• 当元素是 flex 容器的子元素时，它们的显示值是 block 化。
• 换句话说，display: inline , display: table等，将变为 display: block在 的规则内 flex formatting context 。

作为替代方案，您可以使用 flex auto margins创建布局:

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

Revised Codepen