フレックスカラム一旦開発完了

.bl_flexCol_fill側の要素

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

クラス名

bl_flexCol

マークアップ例

<div class="bl_flexCol">
	<figure class="bl_flexCol_hasWidth">
		<img src="" alt="" />
	</figure>
	<div class="bl_flexCol_fill">
		<p></p>
	</div>
</div>
<!-- /.bl_flexCol -->

定義

.bl_flexCol内には、基本的に2つの要素を持ちます。
片方には規定の「幅」を設け、その幅を保つようにし、残った空間をもう一方の要素で埋める挙動をします。
幅を持っている要素 .bl_flexCol_hasWidth
残りの空間を埋める要素 .bl_flexCol_fill
残りの空間を埋める要素には「最低限の幅」が設定でき、それを下回るウインドウ幅になると、1カラムレイアウトに変わる。ある決まったブレイクポイントで振る舞いを変える仕様ではないことに留意。

機能
要素をフレックスレイアウトで配置
写真とテキストなど、関連性の高いものを並べる

あしらい・振る舞い
2カラムのレイアウトで、決まった幅がある要素と、余った空間を埋める要素とがある。後者の要素が「最低限の幅」を下回ったら1カラムに並ぶ。

特記事項
直下の子要素に、img, ifame, video などは避ける。

ファイルパス

Change Log

1. 開発開始：2021-07-16
2. 仕様、名称を大幅に変更
3. 最終更新：2022-07-15