Flexboxで要素を横並び＋下揃えにする方法

Flexboxで要素を横並び＋下揃えにする方法

Flexboxを使うと、複数の要素を横並びにしながら、下のラインを揃えることができます。

1<div class="box">
2  <p class="date">2026.09.26</p>
3  <p class="category">WEB DESIGN</p>
4</div>

1.box {
2  display: flex;
3  align-items: flex-end;
4  gap: 15px;
5}
6
7.box p {
8  margin: 0;
9  line-height: 1;
10}
11
12.date {
13  font-size: 24px;
14}
15
16.category {
17  font-size: 12px;
18}

こんなイメージになります。

12026.09.26   WEB DESIGN
2───────────────
3      ↑
4    下揃え

もしカテゴリーが少し上に見えたら

1.category {
2  transform: translateY(-2px);
3}

これで、

12026.09.26   WEB DESIGN
2             ↑
3          少し上へ

と微調整できます。