解説 .bl_flexCol
.bl_flexCol内には、基本的に2つの要素を持ちます。
片方には規定の「幅」を設け、その幅を保つようにし、残った空間をもう一方の要素で埋める挙動をします。
幅を持っている要素 .bl_flexCol_hasWidth
残りの空間を埋める要素 .bl_flexCol_fill
残りの空間を埋める要素には「最低限の幅」が設定でき、それを下回るウインドウ幅になると、1カラムレイアウトに変わる。ある決まったブレイクポイントで振る舞いを変える仕様ではないことに留意。
見本レイアウト（デフォルト値）
.bl_flexCol_hasWidth 側の要素.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%);
}
固有のCSS変数
--bl--grid--gap
カラム「ギャップ（余白）」を決めます。X方向、Y方向で別々の値を設定できます。
デフォルト: 2em
設定例 --bl--flex-column--gap: 1em 2em;
--bl--flex-column--flex-basis
規定する幅。パーセントは適さない。
デフォルト: 10rem
設定例 --bl--flex-column--flex-basis: clamp(10rem, 50%, 25rem);
--bl--flex-column--fill--min-width
埋める要素の最低限の幅。パーセントが適している。
デフォルト: 50%
設定例 --bl--flex-column--fill--min-width: 40%;