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

今回はFlexBoxで横並びにした要素の位置調整を初心者向けに解説していきます。

更にこの位置調整には沢山のプロパティが存在する為、今回は横方向(横軸)に対する位置調整に焦点を絞って解説していきます。

今回のポイントは以下5つです。

✅要素の左揃え
✅要素の右揃え
✅要素の左右中央揃え
✅最初と最後の要素を両端に配置して均等揃え
✅両端の要素も含め均等揃え

事前にFlexBoxを使って要素を横並びにしたものを準備しておきました。

では事前に準備したソースコードを確認してみましょう。

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>

CSS

.contents{
    width: 600px;
    height: 300px;
    background-color: antiquewhite;
    display: flex;
}
.box1{
    width: 100px;
    height: 100px;
    background-color: burlywood;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: green;
}
.box3{
    width: 100px;
    height: 100px;
    background-color: sienna;
}
.box4{
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
}

ブラウザ表示

ではここで、今回準備したソースコードの解説を少ししておきます。

1.横並びにするブロックをHTMLのdiv要素で作成。

🍎div要素について自信のない方はこちらの記事を参考にして下さい。🍎

2.ブロックの大きさを縦横共に100pxに指定して正方形を作成。

3.Box1〜box4のボックスに 『background-color』を使って背景色を指定。

4.box1〜box4を横並びにする為に、親要素である『.contents』へ『display: flex;』を記述。

🍎display: flex;について自信のない方はこちらの記事を参考下さい。🍎

※今回はブロックの位置調整が分かり易いように、親要素へ背景色を加えています。

横方向へ位置調整をしてみよう

FlexBoxの横方向(横軸)の調整には『justify-content』プロパティを使用します。

そしてこの『justify-content』プロパティは親要素に記述します。

今回のCSSで解説すると以下のようになります。

CSS

.contents{
    width: 600px;
    height: 300px;
    background-color: antiquewhite;
    display: flex;
    justify-content: ○○○○;
}

更に調整させたいケースに合わせて指定する値(○○○○の部分)を変えていきます。

それではそれらの値でどの様な変化があるか、実際のコードを見ながら解説していきます。

左揃えをしてみよう(flex-start)

FlexBoxで要素を左揃えを行う場合には、『flex-start』を指定します。

では実際にコーディングしてみましょう。

CSS

.contents{
    width: 600px;
    height: 300px;
    background-color: antiquewhite;
    display: flex;
    justify-content: flex-start;
}

ブラウザ表示

横の位置に変化が見られないことが確認できます。

これはFlexBoxに於いて、『flex-start』がデフォルト(初期)値であることが原因です。

右揃えをしてみよう(flex-end)

FlexBoxで要素を右揃えを行う場合には、『flex-end』を指定します。

では実際にコーディングしてみましょう。

CSS

.contents{
    width: 600px;
    height: 300px;
    background-color: antiquewhite;
    display: flex;
    justify-content: flex-end;
}

ブラウザ表示

うまく右揃えを出来たことが確認できますね。

これは『flex-end』により、「親要素の横軸の右端に合わせて揃えた」ということになります。

左右中央揃えをしてみよう(center)

FlexBoxで要素を左右中央揃えを行う場合には、『center』を指定します。

では実際にコーディングしてみましょう。

CSS

.contents{
    width: 600px;
    height: 300px;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
}

ブラウザ表示

うまく左右中央揃え出来たことが確認できます。

🍎『justify-content: center;』を使った実際の事例記事はこちら🍎

左右均等揃えをしてみよう(space-betweenとspace-around)

左右均等揃えには2つの種類があります。

左右均等揃えの2つ種類

1.最初と最後の子要素を両端に配置して均等揃え
2.両端の子要素も含め均等揃え

それでは、それぞれの指定方法と違いについて解説していきます。

最初と最後の子要素を両端に配置して均等揃え(space-between)

FlexBoxで最初と最後の子要素を両端に配置して均等揃えを行う場合には、『space-between』を指定します。

では実際にコーディングしてみましょう。

CSS

.contents{
    width: 600px;
    height: 300px;
    background-color: antiquewhite;
    display: flex;
    justify-content: space-between;
}

ブラウザ表示

両端にある①と④のブロックが親要素の両端に配置され、その中の要素が均等揃えされていることが確認できます。

両端の子要素も含め均等揃え(space-around

FlexBoxで両端の子要素も含め均等揃えを行う場合には、『space-around』を指定します。

では実際にコーディングしてみましょう。

CSS

.contents{
    width: 600px;
    height: 300px;
    background-color: antiquewhite;
    display: flex;
    justify-content: space-around;
}

ブラウザ表示

4つのブロックが親要素内で均等に揃えられていることが確認できます。

CSSカテゴリの最新記事