css 固定幅と可変幅の組み合わせ（display:flex;、width:calc()、flex-basis:auto、Bootstrapのcol）

可変幅、固定幅が一つずつのとき

「flex-basis:auto」で設定

サンプル

ソース

<div style="display:flex;">
	<div style="width:100%;flex-basis:auto;">可変幅</div>
	<div style="width:100%;flex-basis:200px;">固定幅</div>
</div>

「width:calc()」で設定

サンプル

ソース

<div style="display:flex;">
	<div style="width:calc(100% - 200px);">可変幅</div>
	<div style="width:200px;">固定幅</div>
</div>

※「100% - 200px」を空白無しの「100%-200px」とすると無効になるっぽい

可変幅が２つ、固定幅が一つのとき

サンプル

ソース

<div style="display:flex;">
	<div style="width:calc((100% - 200px)/2);">可変幅</div>
	<div style="width:200px;">固定幅</div>
	<div style="width:calc((100% - 200px)/2);">可変幅</div>
</div>

※「100% - 200px」を空白無しの「100%-200px」としても無効にならないっぽい・・・「()」で囲ったからかな？
※可変幅・固定幅の個数・比率などは、計算でどうにかできそう

Bootstrap.cssと絡める

サンプル

ソース

<div class="container-fluid">
	<div class="row">
		<div class="col">可変幅</div>
		<div class="col" style="max-width:200px;">固定幅</div>
		<div class="col">可変幅</div>
	</div>
</div>