CSSリファレンス

wrap-flowの意味と使い方

エクスクルージョン(除外)とは「除外要素」とされた要素を囲むように、テキストなどのコンテンツを配置できるレイアウト方法のことです。これまでのようなpositionプロパティやfloatプロパティで配置を指定したレイアウトよりも、柔軟で流動的なレイアウトが可能になります。
wrap-flowプロパティは、要素を除外要素にするとともに、周囲のコンテンツをどのように配置するかを指定するプロパティです。

値の指定方法

auto

エクスクルージョンを作成しません。


both

コンテンツが除外要素の左右両方に回り込みます。


start

コンテンツは除外領域の開始側(書字方向の開始側)には回り込みますが、終了側には回り込みません。


end

コンテンツは除外領域の終了側(書字方向の終了側)には回り込みますが、開始側には回り込みません。


maximum

コンテンツは除外領域の側面のうち、レイアウトに利用できるスペースの大きい方にのみ回り込みます。もう一方には回り込みません。


clear

コンテンツは除外領域の上下には回り込みますが、左右には回り込みません。


関連プロパティ

  • wrap-margin:除外要素の周りの余白を指定する
  • wrap-through:除外要素への回り込みを制御する