CSS プロパティ flex の完全ガイド: 柔軟なレイアウトを実現する
この記事では、CSS プロパティ `flex` について詳しく解説し、その構文、値、使用シナリオ、関連するプロパティについて説明します。また、豊富なコード例も提供し、フレキシブルボックスレイアウトを簡単に習得できるようにします。
CSS プロパティ `flex` とは？
`flex` プロパティは、フレキシブルボックスレイアウトにおけるアイテムのサイズと配置を制御するために使用されます。これは、`flex-grow`、`flex-shrink`、`flex-basis` の shorthand プロパティであり、これらの値を一度に設定できます。
フレキシブルボックスレイアウトは、従来のフロートやポジショニングベースのレイアウトよりも、より柔軟で直感的なレイアウト方法です。主な利点は次のとおりです。
- アイテムの順序を簡単に変更できる。
- アイテムを異なる画面サイズに合わせて自動的に調整できる。
- アイテムを垂直方向と水平方向に整列できる。
`flex` プロパティの構文
`flex` プロパティは、次の 3 つの値を受け取ります。
| 値 | 説明 |
|---|---|
flex-grow |
アイテムが拡大できる比率を指定します。デフォルト値は 0 です。 |
flex-shrink |
アイテムが縮小できる比率を指定します。デフォルト値は 1 です。 |
flex-basis |
アイテムの初期サイズを指定します。デフォルト値は auto です。 |
例：
<style>
.container {
display: flex;
}
.item {
flex: 1 1 auto;
}
</style>
<div class="container">
<div class="item">アイテム 1</div>
<div class="item">アイテム 2</div>
<div class="item">アイテム 3</div>
</div>
この例では、すべてのアイテムが flex: 1 1 auto に設定されているため、コンテナ内で均等にスペースを占有します。
`flex` プロパティの一般的な値
`flex` プロパティには、いくつかの一般的な値があります。
| 値 | 説明 |
|---|---|
flex: auto |
flex: 1 1 auto と同じです。 |
flex: none |
flex: 0 0 auto と同じです。アイテムは拡大も縮小もしません。 |
flex: [数値] |
flex: [数値] 1 0 と同じです。アイテムが拡大できる比率を指定します。 |
`flex` プロパティの適用例
`flex` プロパティは、さまざまなレイアウトを実現するために使用できます。一般的な使用例をいくつか紹介します。
等幅レイアウト
`flex` プロパティを使用して、すべてのアイテムを同じ幅にすることができます。
<style>
.container {
display: flex;
}
.item {
flex: 1;
}
</style>
<div class="container">
<div class="item">アイテム 1</div>
<div class="item">アイテム 2</div>
<div class="item">アイテム 3</div>
</div>
中央揃え
`flex` プロパティと `justify-content` プロパティを使用して、アイテムを中央揃えにすることができます。
<style>
.container {
display: flex;
justify-content: center;
}
.item {
flex: 0 0 auto;
}
</style>
<div class="container">
<div class="item">アイテム 1</div>
<div class="item">アイテム 2</div>
<div class="item">アイテム 3</div>
</div>
レスポンシブレイアウト
`flex` プロパティとメディアクエリを使用すると、画面サイズに合わせてレイアウトを調整できます。
<style>
.container {
display: flex;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
</style>
<div class="container">
<div class="item">アイテム 1</div>
<div class="item">アイテム 2</div>
<div class="item">アイテム 3</div>
</div>
`flex` プロパティと他のフレキシブルボックスプロパティとの関係
`flex` プロパティは、他のフレキシブルボックスプロパティと組み合わせて使用することで、より複雑なレイアウトを実現できます。関連するプロパティをいくつか紹介します。
| プロパティ | 説明 |
|---|---|
flex-direction |
アイテムの配置方向を指定します。 |
flex-wrap |
アイテムを折り返すかどうかを指定します。 |
align-items |
アイテムをクロス軸に沿ってどのように配置するかを指定します。 |
justify-content |
アイテムを主軸に沿ってどのように配置するかを指定します。 |
まとめ
`flex` プロパティは、フレキシブルボックスレイアウトの最も重要なプロパティの 1 つであり、アイテムのサイズと配置を柔軟に制御できます。この記事で紹介した例を参考に、さまざまなレイアウトを試してみてください。
参考資料
よくある質問
Q1: `flex` プロパティと `flex-basis` プロパティの違いは何ですか？
A1: `flex-basis` プロパティはアイテムの初期サイズを指定するのに対し、`flex` プロパティは `flex-grow`、`flex-shrink`、`flex-basis` の 3 つの値を一度に指定できる shorthand プロパティです。
Q2: `flex` プロパティを使用できないブラウザはどうすればよいですか？
A2: `flex` プロパティは、Internet Explorer 10 以上のブラウザでサポートされています。古いブラウザでは、フレキシブルボックスレイアウトの代わりに、フロートやポジショニングベースのレイアウトを使用する必要があります。また、Autoprefixer などのツールを使用すると、古いブラウザ向けにベンダープレフィックスを自動的に追加できます。
Q3: フレキシブルボックスレイアウトについてさらに詳しく学ぶにはどうすればよいですか？
A3: MDN や W3Schools などのオンラインリソースを参照したり、フレキシブルボックスレイアウトに関する書籍を読んだり、オンラインコースを受講したりするなど、さまざまな方法があります。