flow-fromnonenoneflow-from passe d'une valeur à l'autre sans transition.flow-from.flow-from
flow-into
Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :
id est un identifiant commun aux deux propriétés.flow-into et flow-from.Les deux propriétés flow-from et flow-into sont utilisables dans le contexte d'une mise en page
par flux nommés, qu'on peut aussi désigner par "mise en page par régions".
On appelle "flux" du contenu brut : texte, images, tableaux, sans mise en page.
flow-from définit le nom du flux à récupérer. Cette propriété est à appliquer aux éléments
qui doivent recevoir, et mettre en forme, le contenu du flux.
flow-into indique dans quel flux doit être déversé le contenu de ou des éléments.
Cette propriété est à appliquer aux éléments qui contiennent le contenu à mettre en forme.
Pour plus de précisions sur cette technique de mise en page par flux nommés, reportez vous à la présentation plus bas sur cette page.
flow-into et flow-from.La propriété flow-into doit être appliquée aux éléments qui délimitent le contenu.
mon-flux étant un identifiant choisi par le développeur.
La propriété flow-into doit être appliquée aux éléments qui délimitent le contenu.
mon-flux étant un identifiant choisi par le développeur.
La propriété flow-from doit être appliquée aux éléments qui vont recevoir le contenu et le mettre en page.
mon-flux doit être identique à celui utilisé avec flow-into.
La propriété flow-from doit être appliquée aux éléments qui vont recevoir le contenu et le mettre en page.
mon-flux doit être identique à celui utilisé avec flow-into.
none)
flow-from: inherit;
flow-from: revert;
flow-from: revert-layer;
flow-from: revert-rule;
flow-from: unset;
none)
flow-into: inherit;
flow-into: revert;
flow-into: revert-layer;
flow-into: revert-rule;
flow-into: unset;
Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, revert-rule, unset.
Traditionnellement, les éléments présents sur une page web ont un contenu mis en forme par les règles CSS associés à ces éléments. Chaque élément s'occupe donc à la fois de délimiter un contenu et d'assurer, via CSS, la mise en forme de ce contenu.
Dans la mise en forme par flux nommés, il y a séparation entre les éléments produisant du contenu et les éléments assurant la mise en forme. Cette technique est plus proche de ce qui se pratique en imprimerie : une maquette dans laquelle on vient déverser un texte ou des images.
La structure d'un document HTML ressemblera donc à l'exemple ci-après. Les deux premiers <div> sont les fournisseurs de contenu, les quatre suivants s'occupent de la mise en forme.
<div id="contenu1"> ... blablabla ... ></div>
<div id="contenu2"> ... blablabla ... ></div>
<div id="region1"></div>
<div id="region2"></div>
<div id="region3"></div>
<div id="region4"></div>
Et le CSS pour mettre en œuvre la mise en forme par flux sera la suivante (bien entendu il y aura aussi des
règles de mise en forme appliquées aux éléments #region1 à #region4).
#contenu1,#contenu2 {
flow-into: flux1; (1)
}
#region1,#region2,#region3,#region4 {
flow-from: flux1; (1)
}
(1) flux1 est un identifiant choisi par le développeur. Il doit simplement respecter les règles de nommage
habituelles du CSS. Bien entendu c'est le même identifiant qui doit être fourni à flow-into et à flow-from.
Les éléments sur lesquels la propriété flow-into a été appliquée ne sont pas affichés.
Leur contenu peut apparaître dans les autres éléments qui ont été associés par flow-from au même flux.
Les changements de régions peuvent être automatiques (lorsqu'une région est pleine, le contenu se déverse dans la suivante),
soit gérés par les propriétés break-before, break-after et break-inside.
L'ordre des régions est déterminé par leur emplacement dans le document HTML : dans notre exemple la première région
est region1, suivie de region2, puis region3, et enfin region4.
Nous souhaitons obtenir la mise en page suivante. Le bandeau d'en-tête, la publicité et l'index sont des éléments
fixes ou générés indépendamment du contenu spécifique à la page.
Le contenu lui-même doit se répartir dans les éléments notés Intro, 1, 2,
3, et 4.
Voici ce que donne la mise en page réalisée avec des styles CSS. Nous avons utilisé une grille pour positionner les
différents blocs. (Plus d'infos sur les grilles, voir la page grid).
Trois éléments (article1, article2 et article3 fournissent le contenu
(du faux texte lorem ipsum). Le contenu aurait pu être généré dans un seul élément, cela ne changerait pas grand chose.
Comme votre navigateur ne traite probablement pas les mises en page par flux nommés, ces textes apparaissent à la suite,
sans aucune mise ne page. Lorsque tout ira bien, ils viendront s'incruster dans les différents blocs de la grille.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet vehicula erat. Etiam luctus magna nulla, eget luctus nisi ornare ut. Vivamus ut nunc nisi. Nam ut ligula ornare, ullamcorper arcu in, consequat magna. Nullam sed porta ex. Praesent venenatis accumsan leo, sed ultricies dolor tristique ac. Donec porttitor enim vel ultrices scelerisque.
Proin vitae arcu ullamcorper, rutrum enim ut, suscipit mi. Praesent posuere maximus erat, ut consectetur elit posuere a. Maecenas sit amet libero commodo, sodales eros quis, tincidunt lacus. Integer nunc nunc, euismod mollis ipsum mattis, cursus vestibulum tellus. Suspendisse fermentum erat felis, in blandit ante egestas sed. Aenean ultricies, tellus in scelerisque pulvinar, massa mi malesuada dolor, vel consequat nibh velit sed erat. Etiam porttitor enim magna. Aenean quis massa tristique, eleifend metus quis, commodo justo. Cras eget risus semper mauris vehicula pretium nec vel ipsum.
Praesent gravida enim a ullamcorper eleifend. Nulla porttitor nec purus a finibus. Ut non sodales neque. In non eros a tortor rhoncus condimentum. Cras eu nunc sit amet sapien sagittis tincidunt eget non est. Aliquam erat volutpat. Fusce et sem pellentesque, eleifend tellus sed, molestie turpis. Etiam purus urna, laoreet mollis vehicula sit amet, auctor non nunc. Morbi condimentum purus sit amet ligula dignissim aliquet commodo mollis libero. Nullam ultricies bibendum lacus, id mollis ligula sagittis at. Integer lorem lorem, laoreet et mauris sed, sollicitudin consectetur lorem. Integer nibh sem, maximus eu sodales eget, mattis eget lorem. Vivamus sit amet mattis nisl. Nam sagittis lorem et viverra faucibus.
La mise en page par flux nommés sépare totalement le contenu de la mise en page. C'est particulièrement intéressant lorsque le contenu est généré par programme. Ce dernier n'a pas à s'occuper de répartir le contenu entre les différents éléments de mise en page.
Les propriétés flow-into et flow-from peuvent être animées.
Le résultat sera un changement du contenu, la mise en page restant identique.
flow-from par les navigateurs.Ces deux propriétés, ainsi que la mise en page par flux nommés ne sont pas encore prises en charge par les navigateurs (2022).
(1) Safari ne reconnait pas le mot force-end.
flow-from.Les spécifications CSS éditées par le W3C sont organisées en modules.
La propriété flow-from fait partie du module Module CSS - Régions.
Les définitions suivantes sont également décrites dans ce même module.