【入門】Bootstrapの使い方　〜Flexbox〜

みなさんこんにちはさくちゃんです。
本日は「Flexbox」の使い方について解説していきます。

では早速やっていきましょう。

Flexboxの使い方

公式サイトの確認

まずは、公式サイトを確認していきましょう。

公式サイトのタブの「Documentation」をクリックします。

次に左サイドバーの「Utilities」をクリックします。

そして「Utilities」の中の「Flex」をクリックすると参照できます。

Flexboxとは？

そもそもFlexboxとは何かと言うと、要素を横並びにしたり、縦並びにしたりと柔軟（フレキシブル）に対応させることができるものです。

【復習】CSSでの書き方

ここで一旦CSSの書き方を振り返りましょう。

Flexboxを指定するときは、親要素に対して指定します。指定すると子要素が横並ぶになります。
書き方は下のように書きます。

親要素{
    display: flex; 
}

では、親要素に指定できるプロパティについて見ていきましょう！

✅ flex-direction

flex-directionは、「アイテムの並び順を指定するプロパティ」です。
flex-directionで指定できる値は以下の4つです。

• row　→　アイテムを左から右の順に並べます。（デフォルト）
• row-reverse　→　アイテムを右から左の順に並べます。
• column　→　アイテムを上から下の順に並べます。
• column-reverse　→　アイテムを下から上の順に並べます。

書き方は下のように書きます。

親要素{
 　display:flex;
 　flex-direction: 値;
}

✅ justify-content

justify-contentは、「アイテムの配置を指定するプロパティ」です。
justify-contentで指定できる値は以下の5つです。

• flex-start　→　アイテムを左揃えに配置（デフォルト）
• flex-end　→　アイテムを右揃えに配置
• center　→　アイテムを中央揃えで配置
• space-between　→　アイテムの両端の空白を空けずに、均等に間隔を空けてアイテムを配置
• space-around　→　アイテムの両端の空白を空け、均等に間隔を空けてアイテムを配置

書き方は下のように書きます。

親要素{
 　display:flex;
 　justify-content: 値;
}

✅ flex-wrap

flex-wrapは、「アイテムを折り返すか折り返さないか指定するプロパティ」です。
flex-wrapで指定できる値は以下の3つです。

• nowrap　→　アイテムを折り返さずにそのまま一列に表示
• wrap　→　アイテムを下に折り返す
• wrap-reverse　→　アイテムを上に折り返す

✅ order

orderは、「1つ1つのアイテムの並び順を指定するプロパティ」です。
書き方は下のように書きます。

子要素1{
  order:3;
     }

子要素2{
  order:1;
     }

子要素3{
  order:2;
     }

上のように書くと、子要素１が３番目、子要素2が1番目、子要素3が2番目に表示されるようになります。

Bootstrapでの書き方

では、CSSでの書き方を復習したところで、実際にBootstrapの書き方についてやっていきましょう。

Bootstrapで「Flexbox」を指定するときは、下のようにclass名を指定していきます。

<div class="d-flex">
    <div class="bg-info w-50 p-5">1</div>
    <div class="bg-warning w-50 p-5">2</div>
    <div class="bg-primary w-50 p-5">3</div>
</div>

親要素に「d-flex」と指定することで、Flexboxが有効になります。
今回はブロック要素でしたが、「d-inline-flex」と指定すると、インライン要素にも適用できます。
※<div class=”bg-info w-50 p-5″>などは、わかりやすくするために指定しています。

またレスポンシブに対応にも対応させることも可能です。
書き方は「 d- {ブレイクポイント} – flex 」と書きます。
例えば、「md以上（768px以上）の時はFlexboxを適用させる」と指定する場合は「d-md-flex」、インライン要素のときは「d-md-inline-flex」とclass名に指定します。

では、親要素に指定できるプロパティを見ていきましょう！

✅ Direction

Directionは「アイテムの並び順を指定するプロパティ」です。
class名に指定できる値は下の通りです。

• flex-row　→　アイテムを左から右の順に並べます。（デフォルト）
• flex-row-reverse　→　アイテムを右から左の順に並べます。
• flex-column　→　アイテムを上から下の順に並べます。
• flex-column-reverse　→　アイテムを下から上の順に並べます。

書き方は下のように書きます。

<div class="d-flex flex-row">
    <div class="bg-info w-50 p-5">1</div>
    <div class="bg-warning w-50 p-5">2</div>
    <div class="bg-primary w-50 p-5">3</div>
</div>

こちらもレスポンシブ に対応することが可能で、先ほど同様に「flex-md-row」などと指定していきます。

✅ Justify content

Justify contentは「アイテムの配置を指定するプロパティ」です。
class名に指定できる値は下の通りです。

• justify-content-start　→　アイテムを左揃えに配置（デフォルト）
• justify-content-end　→　アイテムを右揃えに配置
• justify-content-center　→　アイテムを中央揃えで配置
• justify-content-between　→　アイテムの両端の空白を空けずに、均等に間隔を空けてアイテムを配置
• justify-content-around　→　アイテムの両端の空白を空け、均等に間隔を空けてアイテムを配置

書き方は下のように書きます。

<div class="d-flex justify-content-start">
    <div class="bg-info w-50 p-5">1</div>
    <div class="bg-warning w-50 p-5">2</div>
    <div class="bg-primary w-50 p-5">3</div>
</div>

こちらもレスポンシブ に対応することが可能で、先ほど同様に「justify-content-md-start」などと指定していきます。

✅ Wrap

Wrapは「アイテムを折り返すか折り返さないか指定するプロパティ」です。
class名に指定できる値は下の通りです。

• flex-nowrap　→　アイテムを折り返さずにそのまま一列に表示
• flex-wrap　→　アイテムを下に折り返す
• flex-wrap-reverse　→　アイテムを上に折り返す

書き方は下のように書きます。

<div class="d-flex flex-nowrap">
    <div class="bg-info w-50 p-5">1</div>
    <div class="bg-warning w-50 p-5">2</div>
    <div class="bg-primary w-50 p-5">3</div>
</div>

こちらもレスポンシブ に対応することが可能で、先ほど同様に「flex-md-nowrap」などと指定していきます。

✅ Order

Orderは「1つ1つのアイテムの並び順を指定するプロパティ」です。
Orderで指定できる数は12までです。
書き方は下のように書きます。

<div class="d-flex">
    <div class="order-2 bg-info w-50 p-5">1</div>
    <div class="order-3 bg-warning w-50 p-5">2</div>
    <div class="order-1 bg-primary w-50 p-5">3</div>
</div>

Orderは親要素に指定するのではなく、子要素に指定していきます。

またこちらもレスポンシブ に対応することが可能で、先ほど同様に「order-md-1」などと指定していきます。

まとめ

今回紹介した内容は一部なので、もっと知りたい方は公式サイトを確認してみてくだい。
では本日は以上になります。