フレックスボックスを活用したレイアウトの調整
前回のページでフレックスボックスの基本的な使い方を学びました。今回はさらに応用的なレイアウトの調整方法を学びましょう。
画面幅に応じたアイテムのリサイズ
フレックスボックスを使うと、画面幅に応じてアイテムが自動的にリサイズされるように設定できます。
<style>
.container {
display: flex;
}
.item {
flex-grow: 1;
}
</style>
<div class="container">
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
<div class="item">アイテム3</div>
</div>
上の例では、.itemにflex-grow: 1;を指定することで、アイテムが等しくリサイズされ、画面幅いっぱいに広がります。
練習問題1
次のようにflex-grow: 1;を.itemに指定すると、どのようなレイアウトになるか予想してください。その後、コードを実際に試して正しいかどうか確認してみましょう。
<style>
.container {
display: flex;
}
.item {
flex-grow: 1;
}
</style>
<div class="container">
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
</div>
練習問題1 解説
正解: アイテム1とアイテム2がコンテナの幅に等しく分割されます。
説明: flex-grow: 1; を指定することで、アイテム1とアイテム2はコンテナの空きスペースを均等に分割して使用します。このため、アイテム1とアイテム2はそれぞれコンテナの幅の半分を占めるように配置されます。
画面幅に応じて折り返すアイテム
画面幅が狭くなった際に、アイテムが次の行に折り返すように設定することもできます。
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex-grow: 1;
}
</style>
<div class="container">
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
<div class="item">アイテム3</div>
</div>
上の例では、.containerにflex-wrap: wrap;を指定することで、アイテムが画面幅に応じて次の行に折り返すようになります。
練習問題2
次のコードで、flex-wrap: wrap;を.containerに指定しなかった場合、どのようなレイアウトになるか予想してください。その後、コードを実際に試して正しいかどうか確認してみましょう。
<style>
.container {
display: flex;
}
.item {
flex-grow: 1;
}
</style>
<div class="container">
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
<div class="item">アイテム3</div>
</div>
練習問題2の解答と解説
練習問題2では、flex-wrap: wrap;を.containerに指定しなかった場合のレイアウトを予想し、コードを実際に試して正しいかどうか確認するように求められました。
解答： flex-wrap: wrap;が指定されていない場合、フレックスアイテムは一行に収まるようにレイアウトされ、画面幅が狭くなっても折り返されません。
解説： flex-wrap: wrap;が指定されていない場合、フレックスボックスはデフォルトでnowrapとなります。これはフレックスアイテムが一行に収まるように配置され、画面幅が狭くなっても折り返されないことを意味します。そのため、画面幅が狭くなると、フレックスアイテムは横に並んだまま表示され、コンテンツが画面からはみ出す可能性があります。折り返しを適用するには、flex-wrap: wrap;を指定する必要があります。
これで、フレックスボックスを使ってより柔軟なレイアウトが作成できるようになりました。練習問題を通じて理解を深めましょう。