当記事では、CSSのプロパティ「display:flex」についてまとめました。
「display:flex」の概要やサンプルコード、実際に使用する事例まで、わかりやすく解説していきます。
【CSS】display:flexとは
CSSの「display: flex」は、要素をフレックスボックスレイアウトの要素として扱うために使用されます。フレックスボックスレイアウトは、複数の要素を一列に並べることができるレイアウト方式で、要素の大きさや位置を調整することができます。
「display: flex」を使用することで、要素をフレックスボックスレイアウトの要素として扱うことができ、以下のようなことができます。
- 要素を横並びにするか、縦並びにするかを指定する
- 要素の大きさや位置を調整する
- 要素を中央揃えや右寄せなど特定の位置に寄せる
- 要素の大きさを自動調整する
「display: flex」は、フレックスボックスレイアウトを使用したい場合に非常に便利で、要素のレイアウトを簡単に調整することができます。
【CSS】display:flexのサンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-between;
}
.item {
width: 30%;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
コードの解説
このコードでは、「.container」クラスに対して「display: flex」を指定し、「justify-content: space-between」を指定しています。
「display: flex」を指定することで、「.container」クラス内の要素をフレックスボックスレイアウトの要素として扱います。
「justify-content: space-between」を指定することで、「.container」クラス内の要素を左右端に寄せるように配置し、要素の間に空白を挿入しています。
また、「.item」クラスに対して、幅30%、高さ100px、背景色を青に設定しています。これにより、「.container」クラス内に3つの「.item」クラスが横並びで、左右端に寄せられ、要素間に空白が入り、幅30%、高さ100px、背景色が青のブロック要素が表示されます。
このように「display: flex」を使用することで、要素をフレックスボックスレイアウトの要素として扱うことができ、要素のレイアウトを簡単に調整することができます。
【CSS】display:flexの活用事例
サイトのナビゲーションバーを制作する
ヘッダーやフッターなどのサイトのナビゲーションバーを作成する際に、「display: flex」を使用することができます。これにより、ナビゲーションバーのリンクを横並びに配置し、幅いっぱいに広がり、親要素の次に改行が入らないようにすることができます。
カラムレイアウトを実装する
カラムレイアウトを実装する際に「display: flex」を使用することができます。これにより、カラムを横並びに配置し、幅いっぱいに広がり、親要素の次に改行が入らないようにすることができます。
レスポンシブデザインを実装する
レスポンシブデザインを実装する際に、「display: flex」を使用することができます。これにより、画面サイズに応じて要素を横並びに配置し、幅いっぱいに広がり、親要素の次に改行が入らないようにすることができます。
【CSS】display:flexまとめ
「display: flex」は、とくに横並びのレイアウトを実装する際に非常に便利なプロパティです。
要素のレイアウトを簡単に調整できますので、ぜひWeb制作で活用していってください。
