初心者のCSSコーディング。FlexBoxの仕組みを知ろう。

初心者のCSSコーディング。FlexBoxの仕組みを知ろう。

FlexBoxで初めてCSSコーディングをしたけど、後々『なぜ指定した内容が反映されないのか』という壁に当たる場面があります。

これについてはFlexBoxの仕組みを知ることで、ある程度回避することができます。

そこで今回はFlexBoxの仕組みについて初心者向けに解説していきます。

FlexコンテナとFlexアイテムを理解しよう

FlexBoxはCSSへ『display: flex;』を記述することで配置や順序を変更できる様にする方法です。

FlexBoxを理解する為にはまず、『Flexコンテナ』と『Flexアイテム』について理解しましょう。

『Flexコンテナ』とは、FlexBox全体を囲う箱だと思って下さい。

そして『Flexアイテム』とは、その箱の中で配置や順序を変更する対象のアイテムのことです。

上の図ではFlexコンテナ内で、Flexアイテムが横並びになり上下中央寄せになっています。

それではこの『Flexコンテナ』と『Flexアイテム』の関係性を意識しながらFlexBoxのコーディングをしてみましょう。

今回は事前に以下のHTMLソースコードを準備しました。

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>FlexBox</title>
        <link rel="stylesheet" type="text/css" href="style.css"> 
    </head>
    <body>
        <div class="contents">
            <div class="box1">①</div>
            <div class="box2">②</div>
            <div class="box3">③</div>
            <div class="box4">④</div>
        </div>
    </body>
</html>

FlexBoxを使ってレイアウトを行う場合、まずは『Flexコンテナ』を指定します。

今回はbox①〜box④をレイアウト調整しようと思っていますので、contentsへFlexコンテナの指定をします。

CSS

.contents{
    display: flex;
}

これでFlexコンテンツを作成し、Flexコンテンツを指定できる状態となりました。

主軸と交差軸を理解しよう

CSSでFlexBoxを指定した場合、デフォルト(初期値)では横並びとなります。

ここからFlexアイテムの位置調整を行う場合、必要となるのが主軸と交差軸です。

上の図からFlexBoxのデフォルト(初期値)では横軸が主軸で、縦軸が交差軸となります。

主軸の位置を調整してみよう(justify-content)

それでは主軸(横軸)での位置を調整してみましょう。

使用するプロパティは『justify-content』です。

例として主軸(横軸)を中央寄せしてみます。

以下の内容をCSSへ追記してみましょう。

CSS

.contents{
  display: flex;
 justify-content: center;
}

ブラウザ表示

主軸(横軸)が中央寄せされたことが確認できますね。

交差軸の位置を調整してみよう(align-items)

それでは交差軸(縦軸)での位置を調整してみましょう。

使用するプロパティは『align-items』です。

例として交差軸(縦軸)を中央寄せしてみます。

更に以下の内容を、CSSへ追記してみましょう。

CSS

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

ブラウザ表示

交差軸(縦軸)が中央寄せされたことが確認できますね。

まとめ

この様にFlexBoxではFlexコンテナとFlexアイテムの関係性を知ることで、『どこにdisplay: flex;を書けばいいのか』を解決することができます。

また、主軸と交差軸の関係性を知ることで、使用するプロパティを使い分けする事ができる様になります。

あとは数をこなして、FlexBoxの使い方をマスターするのみです。

私と共に日々コツコツと勉強をして、スキルを高めていきましょう。

この記事と併せて勉強してみよう

🍎HTML5とCSS3を使ってのレイアウトと歴史。flexboxとは?

🍎FlexBoxの基本。ブロックの並びを変えてみる。

🍎初心者の為のFlexBox。横方向の位置調整する5つの方法。

CSSカテゴリの最新記事