[教えてエンジニア父ちゃん！] flexプロパティで要素を縦にしてみよう！

昨日のブログではflexを使って要素を横並びにし、メニューのボタンを作りました。 今日はflexのことをもっと知っていこうと思います。

flexで柔軟なデザインを作ろう

html

<div class="flex"> <div><a href="toppage.html">トップ</a></div> <div><a href="greeting.html">ご挨拶</a></div> <div><a href="profile.html">プロフィール</a></div> <div><a href="contact.html">お問い合わせ</a></div> </div>

css

.flex { display: flex; justify-content: center; gap: 10px; } .flex >* { border: 1px solid black; padding: 10px; width: 120px; text-align: center; }

表示するとこうなります。

今日はここからさらにflexを深めてみようと思います。

もっとflexを知る

.flex { display: flex; justify-content: center; gap: 10px; flex-direction: column; align-items: center; } .flex >* { border: 1px solid black; padding: 10px; width: 120px; text-align: center; height: 100px; }

flex-direction: column;

これを指定することで、縦方向へのレイアウトも可能になります。

align-items: center;

これで縦線上にアイテムを並べることができます。 heightで高さも指定してみます。 表示するとこうなります。

まとめ

flexを使えば要素は横にも縦にもできるし、さらに一つ一つに高さや横幅の指定、色も変えられるのですね。 flexを知っているとデザインの汎用性は高くなると言えますね。