Question

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

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

＆＃13;

* {
  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);
}

＆＃13;

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

＆＃13;

Answer 1

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

因此，它会与其兄弟姐妹（包括anonymous flex items）垂直堆叠，就像你的代码一样。）

另请注意：

当元素是flex容器的子元素时，它们的显示值阻塞。
换句话说，display: inline，display: table等将成为 flex formatting context 规则中的display: block。

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

＆＃13;

* {
  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);
}

＆＃13;

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

＆＃13;

Revised Codepen

内联级元素被强制转换为flexbox

1 个答案: