左揃えのままflexboxを実装したい

Question

flexboxで文章を左揃えのままにしたいのに、右揃えになってしまいます。

  <section class="news">
    <h3>お知らせ<br><span class="news-span">INFOMATION</span></h3>
    <div class="news-list">
      <div class="topic">
        <p>2021.01.01</p>
        <p class="topic-detail">新年のご挨拶</p>
      </div>
      <div class="topic">
        <p>2020.12.05</p>
        <p class="topic-detail">年末年始の診察時間</p>
      </div>
      <div class="topic">
        <p>2020.10.10</p>
        <p class="topic-detail">ホームページリニューアルのお知らせ</p>
      </div>
    </div><!--news-list-->
  </section>

/*ニュース*/
.news {
    padding: 40px 0 64px 0;
}
.news-list {
  width: 30%;
  margin: 0 auto;
}
.news h3 {
  text-align: center;
}
.topic {
  display: flex;
  justify-content: space-between;
}
.topic-detail {
  display: inline-block;
  text-align: left;
}

Answer 1

justify-content: space-between;では当然そうなります。

flexboxを使う意図がよくわかりませんが、どうしても使うなら、

justify-content: flex-start;

にでもすれば良いかと。

で、それだと日付とトピックの間がくっつくので、.topic-detailに

margin-left: 1em;

でも加えたらどうでしょうか。

Comments

[azaz_wb]

ありがとうございます。