HTML CSS の display: flex

HTMLのCSSで縦横中央ぞろえをするのにdisplay: flexを使っているのですが、思い通りにいきません。

表示させたいのは結果的にこのような感じです。


<div style="background:red;width:500px;height:100px;display: flex;align-items: center;justify-content: center;">
<div align=center>
<span style="font-size:20px;">あいうえおかきくけこさしすせそたちつてと</span><br>
<span style="font-size:12px;">abcdefghijkelmnopqrstuvwxyz<br>abcdefghijkelmnopqrstuvwxyz</div>
</div>
</div>


しかし、<div align=center>で書いているブロックを省略したいのですが、それがうまくいきません。
例えば

<div style="background:red;width:500px;height:100px;display: flex;align-items: center;justify-content: center;">
<a href=# style="font-size:20px;">あいうえおかきくけこさしすせそたちつてと</a><br>
<a href=# style="font-size:12px;">abcdefghijkelmnopqrstuvwxyz<br>abcdefghijkelmnopqrstuvwxyz</a>
</div>


などでも、横にわかれてしまいます。

<div style="background:red;width:500px;height:100px;display: flex;align-items: center;justify-content: center;">
あいうえおかきくけこさしすせそたちつてと<br>
abcdefghijkelmnopqrstuvwxyz<br>abcdefghijkelmnopqrstuvwxyz
</div>

タグを使わないと少しマシになるのですが、なんとなく中央寄せでありつつ左寄せになります。

なぜこのようになるのか、本来書くべき方法も教えていただけたら幸いです。

No.1 ベストアンサー 回答者： naokita 回答日時： 2017/12/25 05:25

<div style="background:red;width:500px;height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;">

<span style="font-size:20px;">あいうえおかきくけこさしすせそたちつてと</span><br>
<span style="font-size:12px;">abcdefghijkelmnopqrstuvwxyz<br>abcdefghijkelmnopqrstuvwxyz</span>
</div>
修正版
<hr>
単純化
<div style="background:red;width:500px;padding:20px 0;text-align:center;">
<p style="margin:0;font-size:20px;">今年もあと１週間　ラストがんばろう！</p>
<p style="margin:0;font-size:12px;">Happy Christmas Merry Christmas<br>Happy New Year! Happy New Year!</p>
</div>

この回答へのお礼

ありがとうございます。display:flex;　に対して、　flex-direction:column　が足りてなかったのですね。
また、単純化してもらったことで、私が間違って使っていたものなどもほんとによくわかりました。

お礼日時：2017/12/25 05:50