Блог

У меня есть h2 и кнопка для страницы о себе для портфолио, над которым я работаю

Я пытаюсь сделать так, чтобы h2 с надписью «Обо мне» находился в верхней части страницы, а кнопка «Подробнее ->» находилась в нижней части раздела «О тексте» .

У меня есть родительский элемент, установленный в виде гибкой строки, и у меня также есть медиа-запрос, поэтому он превращается в столбец на меньшем экране.

 .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 amp;rarr;" />
  </form> 
  <img class="about-img"src="img.jpg" alt="A image">
</div> 

Вы можете пойти дальше и поставить <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 amp;rarr;" />
  </form> 
  <img class="about-img"src="img.jpg" alt="A image">
</div>
 

Проблема в том, что у вас есть flex-direction: row в вашем about-me div, что приводит к выравниванию всех элементов внутри него в ряд, поэтому все, что вам нужно было сделать, это поместить заголовок h2 за пределами about-me div, и все готово.

Я не уверен на 100%, что это сработает, но, насколько я помню, есть

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

и

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

Вы должны применить эти стили к определенным элементам и к тому, как вы хотите, чтобы они были выровнены. Итак, здесь выравнивание-самостоятельное сгибание-начинается на h2 и выравнивание-самостоятельное сгибание-заканчивается на форме