[教えてエンジニア父ちゃん!] 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で高さも指定してみます。
表示するとこうなります。
コメント
コメントを投稿