2 flat logo on transparent 256
2018-05-05

htmlの要素をFlexBoxで簡単に横並びにする|サンプル付き

3m%40oiu8

初心者・独学者がhtmlを勉強していると必ず要素を横並びにする部分が1つの壁となります。

そもそもhtmlの要素を横並びにする方法として、CSSでfloatを指定するかFlexBoxを指定する方法が存在します。

floatは縦の長さが揃わなかったり、横並びの要素が増加すると 後からのメンテナンスがかなり大変だったりしますが、実は世の中的に要素を横並びにする方法としてFlexBoxを活用することが増加しています。

FlexBoxは2つの事を行うことで簡単に要素を横並びに設定する事ができるので、初心者・独学者の方は是非覚えて下さい。

FlexBoxの基本サンプルコード

まずは下記のコードをそのままメモ帳などに貼り付け html拡張子で保存し、展開してみて下さい。 ※CSSもhtml要素内で設定しています

先に解説をご覧になりたい方はサンプルコードを飛ばしてご覧ください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>flexテスト</title>

    <style>
        .wrapper {
            display:flex;
            display:-ms-flexbox;/*--- IE10用 11はこの設定は不要 ---*/
            display:-webkit-box;/*--- Android用 ---*/
            background-color: grey;
            /*画面中央に表示されるように margin: auto;を設定している*/
            margin: auto;
            /*widthを設定しないと画面で色が表示されないので設定している*/
            width: 800px;
            /*heightも分かりやすくするために設定*/
            height: 300px;
            /*wrapperクラスを分かりやすく表示するために設定*/
            padding: 80px;
        }

        .left_content {
            background-color: green;
            width: 50%;
            height: 50%;
        }

        .right_content {
            background-color: red;
            width: 50%;
            height: 50%;
        }
    </style>
</head>

<body>
<div class="wrapper">

    <div class="left_content">
    左要素
    </div>

    <div class="right_content">
    右要素
    </div>

</div>

</body>
</html>

FlexBoxの基本解説

flex_box01

FlexBoxで要素を横並びにするには、2つ手順があります。

1つ目は親要素(div要素)で横並びにしたいdiv要素を囲み、直下に子要素を設定します。

今回はwrapperクラスが親要素で、left_contentとright_contentが子要素となります。

2つ目は親要素のCSSクラスへdisplay: flex;を設定します。

この2点を行う事によってFlexBoxで要素を横並びにする事が可能です。

もちろんCSSの名称は任意の名称に変更可能です。

どうでしょうか?Floatなどで、幅を計算する必要がなく簡単に横並びの設定を行うことが可能です。

FlexBoxの主要対応ブラウザ

IEは10以上に対応しています。

※IE10はcssへIE仕様の内容を適用する ベンダープレフィックス適用となります。

Chromeは古くから対応されています。

もちろんAndroidやiOSにも対応していますので、レシポンシブデザインなども対応できます。

flexbox画像

詳細は引用元のCan I useをご覧下さい。

それでは、さらにFlexBoxの追加紹介を行います。

※以下解説からIE10以下とAndroid用の対応は割愛します。

FlexBoxでjustify-contentを利用して横配置の並び替え

通常FlexBoxは下記画像の通り、子要素は左に詰められた形で表示されます。

flexboxNonejustify-content

要件によっては子要素全体を中央に表示させたり、均等な幅で表示させるなどの要望が発生するかと思います。

そんな時は親要素へjustify-contentを追加すればそういった要望を実現する事が可能です。

justify-content: center;で子要素を中央に配置する

下記画像のように子要素を中央に設定する場合は、justify-content: center;で実現可能です。

flexbox-justify-center

justify-content: center;のサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>flexテスト</title>

    <style>
        .wrapper {
            display:flex;
            background-color: grey;
            width: 100%;
            height: 300px;
            /*子要素を中央へ配置*/
            justify-content: center;
        }

        .left_content {
            background-color: green;
            width: 25%;
            height: 50%;
        }

        .center_content {
            background-color: yellow;
            width: 25%;
            height: 50%;
        }

        .right_content {
            background-color: red;
            width: 25%;
            height: 50%;
        }
    </style>


</head>

<body>

<div class="wrapper">

    <div class="left_content">
        左要素
    </div>

    <div class="center_content">
        中央要素
    </div>

    <div class="right_content">
        右要素
    </div>

</div>


</body>
</html>

justify-content: space-betweenで子要素を均等に配置する

justify-content: space-betweenで要素を均等に配置します。

flexbox-justify-between

justify-content: space-betweenのサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>flexテスト</title>

    <style>
        .wrapper {
            display:flex;
            background-color: grey;
            width: 100%;
            height: 300px;
            /*要素を均等に配置*/
            justify-content: space-between;
        }

        .left_content {
            background-color: green;
            width: 25%;
            height: 50%;
        }

        .center_content {
            background-color: yellow;
            width: 25%;
            height: 50%;
        }

        .right_content {
            background-color: red;
            width: 25%;
            height: 50%;
        }
    </style>


</head>

<body>

<div class="wrapper">

    <div class="left_content">
        左要素
    </div>

    <div class="center_content">
        中央要素
    </div>

    <div class="right_content">
        右要素
    </div>

</div>


</body>
</html>

※以下から justify-contentのサンプルコードは割愛します。

justify-content: space-aroundで左右の端を含めて子要素を均等に配置する

space-betweenとの違いは、両端の子要素も含めて子要素が均等に配置されます。

flexbox-justify-around

justify-content: flex-endで要素を子要素を右づめにする

flex-endを適用する事によって、要素を右づめに設定する事ができます。

flexbox-justify-flex-end

justify-content:stretchで子要素を左詰めにする

justify-content:flex-startがデフォルト値になります。

以下からはFlexBoxで縦要素の配置を制御する方法を紹介します。

FlexBoxでalign-itemsを利用して、縦方向の要素配置を制御する

下記画像の通り、要素の縦幅の長さが違う場合にFlexBoxのalign-itemsを利用する事によって、子要素を縦の中央に合わせる事も可能です。

flexbox-align-items

align-items:centerで縦の中央に要素を設定する

親要素へalign-items:centerを設定する事により、縦方向中央に要素を配置する事が可能です。

flexbox-align-center

align-items:centerのサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>flexテスト</title>

    <style>
        .wrapper {
            display:flex;
            background-color: grey;
            width: 100%;
            height: 300px;
            /*子要素を横中央へ配置*/
            justify-content: center;
            /*子要素を縦中央へ配置*/
            align-items:center
        }

        .left_content {
            background-color: green;
            width: 25%;
            height: 90%;
        }

        .center_content {
            background-color: yellow;
            width: 25%;
            height: 70%;
        }

        .right_content {
            background-color: red;
            width: 25%;
            height: 20%;
        }
    </style>


</head>

<body>

<div class="wrapper">

    <div class="left_content">
        左要素
    </div>

    <div class="center_content">
        中央要素
    </div>

    <div class="right_content">
        右要素
    </div>

</div>


</body>
</html>

align-items:baselineで縦のベースラインを揃える

left_contentクラスへpadding-top 20pxを設定しているので、 左要素という文字を起点に縦要素を揃えます。 ※厳密には違います。

flexbox-align-fbaseline

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>flexテスト</title>

    <style>
        .wrapper {
            display:flex;
            background-color: grey;
            width: 100%;
            height: 300px;
            /*子要素を横中央へ配置*/
            justify-content: center;
            /*子要素を縦ベースラインへ配置*/
            align-items: baseline;
        }

        .left_content {
            background-color: green;
            width: 25%;
            height: 90%;
            padding-top: 20px;
        }

        .center_content {
            background-color: yellow;
            width: 25%;
            height: 70%;
        }

        .right_content {
            background-color: red;
            width: 25%;
            height: 20%;
        }
    </style>


</head>

<body>

<div class="wrapper">

    <div class="left_content">
        左要素
    </div>

    <div class="center_content">
        中央要素
    </div>

    <div class="right_content">
        右要素
    </div>

</div>


</body>
</html>

※以下からサンプルコードを省略します。

align-items:flex-endで縦下揃えに設定する

親要素へalign-items:flex-endを設定する事によって、子要素を縦下揃えに設定することが可能です。

flexbox-align-flex-end

align-items:stretchで縦幅を制御する

align-items:stretchで子要素の高さを設定している場合は、その高さが優先され、設定していなければ親要素の高さまで、 広げます。

flexbox-align-flex-stretch

align-items:flex-start

デフォルトの上部起点の表示です。

いかがでしたでしょうか? FlexBoxはかなり簡単にhtmlの要素を横並びにする事が可能なので、初心者・独学者の方は是非積極的に活用していただきたいです。

その他関連記事

CSS3でhoverした時に背景をふわっと変更する|コピペで動くサンプル付き

Bootstrapでhtml要素を折りたたむ|コピペで動くサンプル付き

Bootstrapでモーダルウインドウをカスタマイズする|コピペで動くサンプル付き

Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き

LocalStorageとBootstrapのモーダルを利用する

前の記事
次の記事