Flexbox を利用してレスポンシブなレイアウトを実現する

📋 目次（クリックで展開）

Flexbox を利用して、レスポンシブレイアウトを実現する例です。PC などの幅の広い画面では、サイドメニューがメインコンテンツの左側に表示されています。幅の狭いモバイルデバイスでは、サイドメニューがメインコンテンツの下に表示されます。

CSS 実装

<style>
    body {
        margin: 0px;
    }


    header,
    footer {
        background: lightblue;
    }


    main {
        background: lightcyan;
    }


    aside {
        background: lightpink;
    }


    /* メインコンテンツ */
    .flexbox {
        display: flex;
        flex-direction: column;
        background: lightpink;
    }


    .flexbox-main {
        flex-grow: 3;
    }


    .flexbox-aside {
        flex-grow: 1;
    }


    /* 768px より広いディスプレイ(PC)に適用 */
    @media screen and (min-width: 768px) {
        .flexbox {
            display: flex;
            flex-direction: row;
        }


        main {
            order: 2;
            border-left: 1px solid white;
        }
    }
</style>

HTML 実装

<body>
    <header>header</header>
    <div class="flexbox">
        <main class="flexbox-main">main
            <div>main start</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>main end</div>
        </main>
        <aside class="flexbox-aside">
            <ui>menus
                <li>menu 1</li>
                <li>menu 2</li>
                <li>menu 3</li>
                <li>menu 4</li>
                <li>menu 5</li>
                <li>menu 6</li>
            </ui>
        </aside>
    </div>
    <footer>footer</footer>
</body>

実行結果

デスクトップ表示

モバイル表示

サンプルアプリケーション

responsive-test.zip

💬 コメント