我如何打破 flex 的元素

Question

我有一个 h2 和一个按钮，用于我正在处理的投资组合的关于我页面

我正在尝试使显示“关于我”的 h2 位于页面顶部，并且“更多 ->”按钮位于“关于文本”div 的底部

我将父元素设置为弹性行，并且我还有一个媒体查询，因此它在较小的屏幕上变为一列。

.about-me {
      width: 100%;
      height: 100vh;
      background-color: #f5a962;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .about-text {
      height: 85%;
      width: 45%;
      overflow: hidden;
      border: 2px solid red; /* will be removed when pushed to AWS  */
    }
    .about-text h3  {
      font-family: 'Titillium Web', sans-serif;
      color: white;
      font-size: clamp(2em, 1vw, 4em);
      padding: 1%;
    }
    .about-text p  {
      font-family: 'Titillium Web', sans-serif;
      padding: 1em;
      color: white;
      font-size: clamp(1em, 1vw, 4em); 
      text-indent: 2em;
    }
     .about-text input {
      border-radius: 35%;
      flex: none;
    } 
    .about-img {
      border-radius: 50%;
    }
@media only screen and (max-width: 600px) {
  .about-me {
    flex-direction: column;
  }
  .about-text {
    flex-direction: column;
    width: 90%;
  }
}

<div class="about-me">
  <h2>About Me</h2>
  <div class="about-text">
    <h3>Hello,</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
    Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
    Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
    Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
      Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
      Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
      Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
      Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
      Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
      Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>
    </div>
  <form action="#">
    <input type="submit" value="More &rarr;" />
  </form> 
  <img class="about-img"src="img.jpg" alt="A image">
</div>

Answer 1

您可以继续将<h2>About Me</h2> 放在<div class="about-me"> 之外。

将您的代码更改为：

<h2>About Me</h2>
<div class="about-me">
  <div class="about-text">
    <h3>Hello,</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
    Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
    Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
    Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
      Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
      Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
      Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
      Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
      Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
      Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>
    </div>
  <form action="#">
    <input type="submit" value="More &rarr;" />
  </form> 
  <img class="about-img"src="img.jpg" alt="A image">
</div>

问题是您的about-me div 中有flex-direction: row，这会导致其中的所有元素排成一行，因此您只需将h2 标题放在about-me div 之外，然后一切顺利。

Answer 2

我不是 100% 确定这会奏效，但我记得有

align-self: flex-start; // For top of the container

和

align-self: flex-end; //For the bottom of the container

您必须将这些样式应用于特定元素，以及您希望它们如何排列。所以这里 align-self flex-start on h2 和 align-self flex-end on form