フレックスボックスを使ったレスポンシブデザイン

このページでは、フレックスボックスを使用したレスポンシブデザインについて学びます。フレックスボックスは、要素間のスペースを自動的に調整するための強力なCSSツールです。これにより、ウェブページがさまざまなデバイスで適切に表示されるようになります。

フレックスボックスの基本

フレックスボックスを適用するには、親要素に「display: flex;」と指定します。これにより、その子要素はフレックスアイテムとなり、フレックスボックス内で配置が調整されます。

演習問題1

以下のコードで、親要素にフレックスボックスを適用してみましょう。

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

解答例：

.container {
  display: flex;
}

フレックスアイテムの並び替え

フレックスボックスを使うと、フレックスアイテムの並び順や配置方法を簡単に変更できます。例えば、「justify-content」と「align-items」プロパティを使って、アイテムの水平方向と垂直方向の位置を調整できます。

演習問題2

以下のコードで、「justify-content」と「align-items」プロパティを使って、アイテムを中央に配置してみましょう。

.container {
  display: flex;
  /* ここにコードを追加してください。 */
}

解答例：

.container {
display: flex;
justify-content: center;
align-items: center;
}

フレックスアイテムのサイズ調整

フレックスボックスを使うと、フレックスアイテムのサイズも簡単に調整できます。「flex-grow」、「flex-shrink」、「flex-basis」プロパティを使って、アイテムの拡大・縮小や基本サイズを指定することができます。これらのプロパティは「flex」プロパティのショートハンドとしても指定できます。

演習問題3

以下のコードで、アイテム1とアイテム3を均等に拡大し、アイテム2を固定サイズにしてみましょう。

.item1 {
/* ここにコードを追加してください。 */
}

.item2 {
/* ここにコードを追加してください。 */
}

.item3 {
/* ここにコードを追加してください。 */
}

解答例：

.item1 {
flex: 1;
}

.item2 {
flex: 0 0 100px; /* flex-growを0、flex-shrinkを0、flex-basisを100pxに設定 */
}

.item3 {
flex: 1;
}

これで、フレックスボックスを使ったレスポンシブデザインの基本となる概念や演習問題を学ぶことができました。フレックスボックスは、さまざまなデバイスに対応したレイアウトを簡単に作成するのに役立つため、ぜひ積極的に活用してください。