3カラムレイアウト作成

3カラムレイアウト作成

・可変レイアウト部分をflex: 1にし、残りのレイアウトを固定幅にすればok

.parent {
    display: flex;
    height: 100vh;
}

.fix {
    width: 300px;
    background-color: violet;
}

.content {
    flex: 1;
    background-color: aqua;
}

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

export const Column2Layout = () => {
    return (
        <div className="parent">
            <div className="fix"></div>
            <div className="content"></div>
            <div className="fix"></div>
        </div>
    )
}

縦に3カラムレイアウトするには、親要素で子の整列方向を指定する。(flex-direction: column;)

.parent {
    display: flex;
    height: 100vh;
    flex-direction: column;
}

.menu {
    height: 300px;
    background-color: violet;
}

.content {
    flex: 1;
    background-color: aqua;
}