HTML/CSS 网格布局文本元素位置答案

【问题标题】：HTML/CSS grid layout text elements positionHTML/CSS 网格布局文本元素位置
【发布时间】：2017-07-30 11:17:32
【问题描述】：

我有一个一直在使用的 codepen，但似乎无法让引用正确地定位在另一个之下。正如您在此处看到的，作者被放置在同一网格单元格的一侧。 https://codepen.io/AngelCasas/pen/qXdGbd?editors=1100 html5：

    <blockquote class="phrase">
      <p style="font-size: 3vh">"The monotony and solitude of a quiet life<br> stimulates the creative mind"</p>
      <p>- Albert Einstein -</p>
    </blockquote><!-- End of quote -->

CSS：

    .phrase {
      grid-area: phrase;
      display: flex;
      justify-content: center;
      text-align: center;
      font-family: Cardo, serif, Arial;
      font-size: 1.5vh;
      color: #00264d;
      }

有什么方法可以让文字向下流动而不是横向流动？提前感谢您的任何建议！

【问题讨论】：

查看codepen，我不确定我是否理解问题所在。你介意扩大你对问题的描述吗？这是什么意思...Is there any way I can get the text to flow down instead of sideways?
抱歉，我更新了 codepen 并通过第一个答案解决了问题，但无论如何感谢您的帮助！

标签： css flexbox css-grid

【解决方案1】：

从 css 中删除 display: flex;，下一个 <p> 将放置在前一个下方。

【讨论】：

【解决方案2】：

添加属性'flex-direction'并将其设置为列：

.phrase {
      grid-area: phrase;
      display: flex;
      justify-content: center;
      text-align: center;
      font-family: Cardo, serif, Arial;
      font-size: 1.5vh;
      color: #00264d;
      flex-direction: column;
}

【讨论】：