CSS3

プロパティ

wrap-flow

[Edge]⛌。→●、mdn

排他体の宣言。

要素は、その wrap-flow プロパティの算出値が auto 以外であるとき、排他体になる。

auto

排他体は作成されない。行内フロー内容は、通例どおり要素と相互作用する。特に、要素が浮動体 [CSS21] である場合、【他の値が指定されたとしても、】 ふるまいは変化しない。

both

行内フロー内容は、排他体の［始端辺、終端辺］いずれの周りにもフローできる。

<DIV style="border:1px solid black; width:200px; font-size:20px;">
 <DIV style="border:1px solid red; width:100px;
  wrap-flow:both;
 ">DIVです</DIV>
 ああああああああああああああああああ
</DIV>

¶

start

行内フロー内容は、排他区画の始端辺の周りにフローできる一方で、終端辺の周りの区画は、空いたままになるものとする。

<DIV style="border:1px solid black; width:200px; font-size:20px;">
 <DIV style="border:1px solid red; width:100px;
  wrap-flow:start;
 ">DIVです</DIV>
 ああああああああああああああああああ
</DIV>

¶

end

行内フロー内容は、排他区画の終端辺の周りにフローできる一方で、始端辺の周りの区画は、空いたままになるものとする。

minimum

行内フロー内容は、排他区画の［フロー内容の包含ブロックの中で、始端、終端のうち、可用な空間が狭い側の辺†］の周りにフローできる一方で、他方の辺の周りは、空いたままになるものとする。

【†両側の空間が等しくなる場合のふるまいは規定されていない（ユーザー エージェントに依存することになる）。次項も同様。】

maximum

行内フロー内容は、排他区画の［フロー内容の包含ブロックの中で、始端、終端のうち、可用な空間が広い側の辺］の周りにフローできる一方で、他方の辺の周りは空いたままになるものとする。

clear

行内フロー内容は、フロー内容のブロック進行方向において、排他体の［前／後］にしかフローできない。排他体の［始端／終端］辺の周りの区画は、空いたままになるものとする。

算出値が auto 以外になる場合、要素は排他体になる。その排他区画は、要素の包含ブロックの回り込み文脈に供与され、包含ブロックの子孫たちは、排他区画を回り込むようになる。

テスト