IT初心者の分かったメモ

1. display:flex;って何?

Webページのレイアウトを作るとき、多くの人が最初に使うのが、display: block; や inline-block; といった基本的な表示形式です。 たとえば、HTMLでほとんどの場面で使われる div タグは、デフォルトで display: block; として扱われます。そのため、要素が縦にズラッと並ぶのが特徴です。

たとえば、「これを横に並べたい」と思ったとき、どうすればよいのでしょうか。 そこで登場するのが、display: flex; というプロパティです。 このプロパティを使うと、子要素が横に並び、位置や間隔も自由に整列できるようになります。

このように、display: block; が「縦に積む」のに対して、display: flex; は「横に並べる」というレイアウトの仕組みです。 さらに、display: flex; では justify-content というプロパティを使うことで、横に並んだ要素を自由に整列できるという利点があります。 今回は、そんな display: flex; の使い方を、3つのパターンに分けてご紹介します。

2. display: flex の基本的な書き方

display: flex; は、前の項でも述べたように、子要素を横に並べたり整列させたりするのに便利なプロパティです。 親要素にこのプロパティを指定することで、中の子要素の位置を柔軟にコントロールすることができます。 以下に、基本的な書き方の例をご紹介します。

<div class="container_test">
  <div class="item_test1">要素1</div>
  <div class="item_test2">要素2</div>
  <div class="item_test3">要素3</div>
</div>

.container_test {
  display: flex;
  color: #fff;
}
.item_test1{
   background-color: red;
}
.item_test2{
   background-color: blue;
}
.item_test3{
   background-color: green;
}

このように、CSSで display: flex; を指定するだけで、要素が縦並びから横並びに切り替わるのがポイントです。 特別な設定をしなくても、display : flex;を使うだけで自然と横方向に並べることができるため、レイアウト調整がとても簡単になります。

3. よく使う3つのレイアウト例

.container_test {
  display: flex;
  justify-content: space-between;
}

.container_test {
  display: flex;
  justify-content: center;  /* 横方向の中央揃え */
  align-items: center;      /* 縦方向の中央揃え */
  height: 200px;            /* 縦方向に中央揃えするには高さが必要 */
}

4. justify-contentの使い方と値の違い

justify-content は、display: flex; が指定された親要素の子要素を「横方向にどう並べるか」を決めるためのプロパティです。 前の章で紹介したように、「要素を左寄せ」「中央寄せ」「右寄せ」「均等に並べる」といった並び方を指定できます。 以下に、justify-content の値の種類と、それぞれの表示イメージをまとめた表を掲載します。

5. よくあるミスと対策

ここでは、display: flex; を使う中で初心者がよくハマるミスと、その解決方法（対策）を紹介します。 「うまく中央に寄らない」「並ばない」「余白がおかしい」など、誰でも一度は経験することばかりです。

6. 最後に

Flexboxは「難しそう」と感じるかもしれませんが、まずは今回紹介した3つの基本パターンだけ覚えるだけでも十分です。 ぜひ、自分のブログや作品づくりの中で試しながら、少しずつ身につけていきましょう！