フレックスカラムのデモ1

`.bl_flexCol_fill`側の要素

幅を決める要素の残りの空間を埋めるように幅をフレックスに変える要素。幅を決めた側に画像を置き、埋める方をテキストにするとよい。
とはいえ、、、ほとんどの場合floatを使った方がいいのではないかと思うが、、、、

幅を決めるので、基本的には固定幅で使う想定だが、可変にすることも可能なので、そのサンプル。

追加CSS

.bl_flexCol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bl--flex-column--gap, 2em);
}

.bl_flexCol .bl_flexCol_hasWidth {
	flex-basis: var(--bl--flex-column--flex-basis, 10rem);
	flex-grow: 1;
	max-width: var(--bl--flex-column--flex-basis, 10rem);
}

.bl_flexCol .bl_flexCol_fill {
	flex-basis: 0;
	flex-grow: 999;
	min-width: var(--bl--flex-column--fill--min-width, 50%);
}