Попытка выравнивания текста по левому краю в контейнерах flex с помощью правила flex

Question

У меня есть раздел, в котором есть список шуток, где каждая шутка индивидуально содержится в div. В каждой шутке есть два абзаца, которые я пытаюсь выровнять, чтобы отобразить слева (начало гибкого контейнера). Сейчас две основные проблемы, с которыми я сталкиваюсь, заключаются в том, что первый абзац (Q :) не соответствует самому началу контейнера

Я пытаюсь выровнять абзацы, чтобы и аббревиатура, и вопрос переносились на крайнюю левую границу содержимого контейнера.

Вторая проблема, с которой я сталкиваюсь, заключается в том, что второй абзац (A :) продолжает центрироваться в контейнере вместо отображения на левой стороне. Я не уверен, почему первый абзац не центрируется, а второй - при отображении веб-страницы. Мне сказали, что это может быть достигнуто с помощью одного гибкого правила, которое я пытался найти в моем div p наборе правил.

В целом, я пытаюсь добиться этого ожидаемого отображения:

HTML

 <section id="jokes">
        <h2>Out Of This World Joke Inventory!</h2>
        <p>Hover over each joke to see the answer!</p>
        <div id="joke-cards">
          <div id="sun-joke">
            <img src="img/icon1.png" alt="Icon of shooting star">
            <hr>
            <p><span class="abbrv">Q:</span> Why did the sun go to school?</p>
            <p><span class="abbrv">A:</span> <span class="answer">To get brighter!</span></p>
          </div>

          <div id="tick-joke">
            <img src="img/icon2.png" alt="Icon of rocket blasting off">
            <hr>
            <p><span class="abbrv">Q:</span> What do you call a tick on the moon?</p>
            <p><span class="abbrv">A:</span> <span class="answer">A luna-tick</span></p>
          </div>

          <div id="restaurant-joke">
            <img src="img/icon3.png" alt="Icon of flag on the Moon">
            <hr>
            <p><span class="abbrv">Q:</span> Why did the people not like the restaurant on the moon?</p>
            <p><span class="abbrv">A:</span> <span class="answer">Because there was no atmosphere.</span></p>
          </div>
     </div>
</section>

CSS

#joke-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}

#joke-cards div {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  height: 400px;
  width: 300px;
  background-color: #9B580D;
  opacity: 80%;
  padding: 20px;
}

#joke-cards div img {
  height: 150px;
  width: 150px;
}

hr {
  width: 65%;
}

div p {
  align-content: flex-start;
}

.abbrv {
  font-size: 28px;
  color: #E0DBD7;
}

.answer {
  display: none;
  font-size: 24px;
  color: #191919;
}

#joke-cards div:hover .answer {
  display: inline;
}

Answer 1

Вы должны обернуть свои теги абзаца в контейнер, который будет иметь атрибут place-items, а не каждый абзац. Кроме того, вам нужно изменить отображаемое значение с блока для наследования для каждого абзаца содержимого.

<div class="content">
   <p><span class="abbrv">Q:</span> Why did the sun go to school?</p>
   <p><span class="abbrv">A:</span> <span class="answer">To get brighter!</span></p>
</div>

div.content{
    display: flex;
    flex-direction: column;
    width: 100%;
    place-self: flex-start;
}

div.content p {
    display:inherit;
}

Answer 2

Используйте align-items: flex-start; для divs, width + margin для img и text-align: left; для p

img{ width: 50%; outline: 1px solid blue; margin: 0 auto; }
#joke-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}

#joke-cards div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  height: 400px;
  width: 300px;
  background-color: #9B580D;
  opacity: 80%;
  padding: 20px;
}

#joke-cards div img {
  height: 150px;
  width: 150px;
}

hr {
  width: 65%;
}

div p {
  text-align: left;
}

.abbrv {
  font-size: 28px;
  color: #E0DBD7;
}

.answer {
  display: none;
  font-size: 24px;
  color: #191919;
}

#joke-cards div:hover .answer {
  display: inline;
}

<section id="jokes">
  <h2>Out Of This World Joke Inventory!</h2>
  <p>Hover over each joke to see the answer!</p>
  <div id="joke-cards">
    <div id="sun-joke">
      <img src="img/icon1.png" alt="Icon of shooting star">
      <hr>
      <p><span class="abbrv">Q:</span> Why did the sun go to school?</p>
      <p><span class="abbrv">A:</span> <span class="answer">To get brighter!</span></p>
    </div>

    <div id="tick-joke">
      <img src="img/icon2.png" alt="Icon of rocket blasting off">
      <hr>
      <p><span class="abbrv">Q:</span> What do you call a tick on the moon?</p>
      <p><span class="abbrv">A:</span> <span class="answer">A luna-tick</span></p>
    </div>

    <div id="restaurant-joke">
      <img src="img/icon3.png" alt="Icon of flag on the Moon">
      <hr>
      <p><span class="abbrv">Q:</span> Why did the people not like the restaurant on the moon?</p>
      <p><span class="abbrv">A:</span> <span class="answer">Because there was no atmosphere.</span></p>
    </div>
  </div>
</section>