右寄せ、左寄せのフロート解除

ミニマムでは、右寄せ、左寄せのスタイルはあるが、フロート解除のスタイルを指定していない。

ネクストでは、メディアクエリーで、600px以下の時は、フロートを解除している。

この解除は、フロートの対象が画像であるような場合、画面幅が小さくなると、テキストの位置行あたりの文字数が少なくなり、バランスが悪くなることへの対処であるが。

このバランスが、画像のサイズによっても異なる。ミニマムでは、右寄せ、左寄せの場合、画像のサイズを最大50%に制限することで対応している。

これをカラムズや、グリッド、フレックスのように、要素に最小幅を指定することで自動的に寄せを解除させることができないだろうか。最小幅制限で、要素をラップさせるようなことはできるが、ラップしたあとも、最初の要素は寄せられたままなのを、センタリングするような処理がしたい。

どうする家康。

ミニマックスや、クランプが使えるかどうか。グリッドスタイルのような処理が必要か。何グリッドつかっている場合は、とか。

フロート側を、width:clamp(300px,50%,50%);float:left; にし、

メディアクエリーで600pxでフロート解除する方法しか無さそう。後は、ギャップを考慮して計算するとか。

掲載日時: 2023年6月21日(水) 10:47