聖杯レイアウト作成してみる

聖杯レイアウト作成してみる

.container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

nav {
    height: 50px;
    background-color: gray;
    text-align: center;
    vertical-align: middle;
}

main {
    display: flex;
    flex-direction: row;
    flex: 1
}

.bottom {
    height: 100px;
    background-color: wheat;
    text-align: center;
}


.left {
    width: 300px;
    background-color: coral;
}

.middle {
    flex: 1
}

.right {
    width: 300px;
    background-color: teal;
}

import React from 'react'
import './Hoge.css'

export const Hoge = () => {
    return (
        <>
            <div className="container">
                <nav>navigation</nav>
                <main>
                    <div className="left">left</div>
                    <div className="middle">middle</div>
                    <div className="right">right</div>
                </main>
                <div className="bottom">bottom</div>
            </div>
        </>
    )
}

結果