CSS

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

2019年8月7日

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

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;
    }
}
    <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>main end</div>
        </main>
        <aside class="flexbox-aside">
            <ui>menus
                <li>menu 1</li>
                <li>menu 2</li>
                <li>menu 3</li>
            </ui>
        </aside>
    </div>
    <footer>footer</footer>

-CSS