コンテナー　1000px

Flexbox

デフォルト

display:flex のみ ああああああ
display:flex のみ あああああああああああああああああああああああああああ
display:flex のみ あああ
display:flex のみ ああああああ
display:flex のみ ああああああ
display:flex のみ あああああああああああ

均等幅

flex: 1; =（flex: 1 1 0;）ああああああ
flex: 1; =（flex: 1 1 0;）ああ
flex: 1; =（flex: 1 1 0;）ああああああ
flex: 1; =（flex: 1 1 0;）あああ
flex: 1; =（flex: 1 1 0;）あああああああああああああああああああああああああああ

可変 + 可変 カンプに合わせて演算

width: calc( 680 / 1000 * 100% );
width: calc( 280 / 1000 * 100% );

可変 + 可変 カンプに合わせて演算 左右 padding 20px

width: calc( 680 / 1000 * 100% );
width: calc( 280 / 1000 * 100% );

可変 + 可変 2対1

flex: 2;
flex: 1;

可変 + 可変 2対1 + 可変gap

gap: clamp(最小値, PCのgap/PC画面幅×100で丸める,最大値)

gap: clamp(45px, 8vw, 80px)

ここでは画面幅1000pxにしているがPCカンプサイズで計算する

例)画面幅1366px 横幅最大幅1166px は gap: clamp(45px, 6vw, 80px); p114

flex: 2;
flex: 1;

可変 + 固定

flex: 1;
width: 300px;

固定 + 固定で縮ませない

flex: 0 0 500px;
または
width: 500px; flex-shrink: 0;
flex: 0 0 300px;
または
width: 300px; flex-shrink: 0;