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

Question

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

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

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

有没有办法将 P 降低到 H3 以下，并使其在该项目中居中？我还需要 P 不要溢出项目并进入 iframe (max-width?)

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

Answer 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;
}

这样做有用吗？

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

Is it possible to add layers (more rows) of text using one flex item?

html

css

iframe

gridview

flexbox