是否可以使用一个弹性项目添加文本层（更多行）？答案

【问题标题】：Is it possible to add layers (more rows) of text using one flex item?是否可以使用一个弹性项目添加文本层（更多行）？
【发布时间】：2019-01-03 09:36:08
【问题描述】：

我创建了一个 flexbox 容器元素，我的 iframe 位于其右侧。

但是，我希望在其左侧使用不同标签的两层甚至三层文本在宽度上均匀分布：1000px；边距：0 自动； div 我有。可能是 H3 标题和 P。

此刻他们并肩作战。 Flexbox 显然为 P 创造了另一个项目。

有没有办法将 P 降低到 H3 下方并使其行为以使其位于该项目的中心？我还需要 P 不要溢出项目并进入 iframe（最大宽度？）

HTML：

    <main>
      <div class="vid-1">
        <h3 id="hide" class="chan-h3-shift">A comprehensive view on the Oculus Go</h3>
        <p id="hide" class="chan-p-shift">This review</p>
        <iframe class="lefttoright" src="https://www.youtube.com/embed/momqQl-9-tg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </main>

CSS：

    #hide  {
      display: block;
    }

    .vid-1  {
      display: flex;
      width: 1000px;
      padding-bottom: 300px;
      margin: auto;
    }

    iframe  {
      width: 50%;
      height: 300px;
      position: absolute;
      display: block;
      transform: translate(500px, 0)
    }

    .chan-h3-shift  {
      font-size: 0.9em;
      padding: 0 0 0 60px;
    }


    .chan-p-shift  {
      padding: 0 800px 0 60px;
    }

    @keyframes lefttoright {
      0%  {
        transform: translateX(-100%);
        opacity: 0;
      }
      100%  {
        transform: translateX(0);
      }
    }

    .lefttoright  {
      animation-name: lefttoright;
      animation-duration: 3s;
    }

【问题讨论】：

我认为您正在尝试使用 Flexbox 完成 Grid 的工作。你想让 p 标签在垂直和水平方向上都居中吗？您究竟想要 1000 像素的间隙在哪里？您希望在较小的屏幕上发生什么？

标签： html css iframe gridview flexbox

【解决方案1】：

如果你想让你的 p 和你的 h3 一个在另一个之上，最好的办法是使用另一个 div 来包装它们：

 <div class="vid-1">
  <div class="column"> 
    <h3 id="hide" class="chan-h3-shift">A comprehensive view on the Oculus Go</h3>
    <p id="hide" class="chan-p-shift">This review</p>
  </div>
  <iframe class="lefttoright" src="..."></iframe>
 </div>

有了这个css：

.column {
  display: flex;
  flex-direction: column;
}

这能解决问题吗？

【讨论】：

完美。谢谢！