flexを使わない時に使うcss（学んだこと）

Calcを使う

⒈ calc使用方法
❶要素の幅をpx値で指定する代わりに、2つ以上の数値を加算した結果を指定する方法
（例）.about-container {
width: calc(100px + 50px);
}

❷サイドバーのレイアウトによく使う方法
幅いっぱい（100%）から、50pxの固定幅を引いた数値を指定
（例）. about-container{
width: calc(100% - 50px);
}

2.calc実装方法
❶要素をコンテナ内で天地と左右の中央に配置するとき
Flexboxを使用できない場合（例えば、要素を絶対または固定に配置する必要がある場合）
（例）.about-container {
position: absolute
top: calc(50% - 150px);
left: calc(50% - 150px);
}

❷ルートに基づいたサイズ指定するとき
remユニットからビューポートベースのグリッドを作成することができる
（例）html {
font-size: calc(100vw / 30);
}
1remはビューポート幅の1/30に関連づけられページ上のテキストは、ビューポートに基づいて自動的にサイズが変更される。