[教えてエンジニア父ちゃん!] 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を知っているとデザインの汎用性は高くなると言えますね。

コメント

このブログの人気の投稿

[クレンジングと洗顔方法] 美肌になりたい!

謎解きの魅力

免許証の裏面で意思表示してみた