Flexboxの基礎

Flexbox (フレキシブルボックス) は、HTML と CSS を使用してレイアウトを作成する際の非常に強力なツールです。以下に、Flexbox の基本的な概念やパターンを示すいくつかの例を紹介します。

1. 基本的な Flex コンテナ

html
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
css
.flex-container {
  display: flex;
}

.flex-container > div {
  border: 1px solid #ddd;
  padding: 10px;
}

この例では、.flex-container クラスに display: flex; を適用することで、その子要素はフレックスアイテムになります。

2. 水平方向の整列

html
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
css
.flex-container {
  display: flex;
  justify-content: space-around; /* ここを変更して異なる配置を試す */
}

justify-content プロパティを使って、アイテムを水平方向に整列させることができます。例えば space-around, space-between, center, flex-start, flex-end などがあります。

3. 垂直方向の整列

HTML は上記と同じです。

html
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
css
.flex-container {
  display: flex;
  align-items: center; /* ここを変更して異なる配置を試す */
}

align-items プロパティは、アイテムを垂直方向に整列させるために使用します。center, flex-start, flex-end, baseline, stretch などがあります。

4. フレックスアイテムの柔軟性

html
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
css
.flex-container {
  display: flex;
}

.flex-container > div {
  flex: 1; /* ここを変更して異なる柔軟性を試す */
}

flex プロパティを使って、フレックスアイテムの伸縮の仕方を制御します。例えば flex: 1; はすべてのアイテムが同じ割合でスペースを占めるようにします。

5. フレックスアイテムの順序

html
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="order: -1;">3</div>
</div>
css
.flex-container {
  display: flex;
}

order プロパティを使用して、フレックスアイテムの表示順序を変更できます。

これらの例は Flexbox の基本を示していますが、実際にはもっと多くのプロパティや機能があります。これらを組み合わせることで、様々なレイアウトを簡単に作成することができます。実際にコードを書いて試してみると、Flexbox の概念をより深く理解することができるでしょう。

練習問題

Flexbox（フレキシブルボックス）についての理解を深めるための実践的な練習問題をいくつか示します。これらの問題は、Flexboxの基本的な概念とその応用を理解するのに役立ちます。

練習問題 1: 基本的なFlexコンテナの作成

html
<div class="flex-container">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>
css
.flex-container {
  display: flex;
  /* ここにCSSを追加 */
}

問題:

  1. .flex-container に適切なCSSを追加して、アイテムを水平に並べてください。
  2. それぞれのアイテムに同じ幅を持たせるにはどうすれば良いでしょうか？

練習問題 2: アイテムの配置

html
<div class="flex-container">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>
css
.flex-container {
  display: flex;
  /* ここにCSSを追加 */
}

問題:

  1. コンテナ内のアイテムを水平方向の中央に配置してください。
  2. コンテナの高さを設定し、アイテムを垂直方向の中央に配置してください。

練習問題 3: Flexラップとアイテムの順序

html
<div class="flex-container">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
  <div>アイテム4</div>
</div>
css
.flex-container {
  display: flex;
  flex-wrap: wrap;
  /* ここにCSSを追加 */
}

.flex-container > div {
  /* ここにCSSを追加 */
}

問題:

  1. 各アイテムに固定の幅を設定し、コンテナの幅を超えるとアイテムが次の行に折り返されるようにしてください。
  2. 特定のアイテム（例えばアイテム3）の順序を変更するにはどうすれば良いでしょうか？

練習問題 4: アイテムの柔軟性

html
<div class="flex-container">
  <div class="flex-item flex-item-1">アイテム1</div>
  <div class="flex-item flex-item-2">アイテム2</div>
  <div class="flex-item flex-item-3">アイテム3</div>
</div>
css
.flex-container {
  display: flex;
}

.flex-item {
  /* ここにCSSを追加 */
}

.flex-item-1 {
  /* ここにCSSを追加 */
}

.flex-item-2 {
  /* ここにCSSを追加 */
}

.flex-item-3 {
  /* ここにCSSを追加 */
}

問題:

  1. 各アイテムに異なる flex 値を設定して、コンテナ内でのアイテムの幅が変わるようにしてください。
  2. 特定のアイテム（例えばアイテム2）が残りの空間をすべて埋めるようにするにはどうすれば良いでしょうか？

これらの問題を通じて、Flexboxの基本的な使い方や

応用方法を実践的に学ぶことができます。異なる設定を試し、その結果を観察することで、Flexboxの理解を深めることができるでしょう。