A flank pairs two items side by side, where one item (the “flank”) sits at its natural size while the other stretches to fill the remaining space. It’s the right fit for any “small thing next to a larger thing” pattern: an avatar next to a name and bio, an icon beside a paragraph of text, an input followed by a submit button, or a sidebar alongside page content.
By default the first child is the flank, but you can pick either end with cs-flank:start or cs-flank:end. When the main content gets too narrow, the two items wrap onto separate lines automatically.
<divclass="cs-flank"><div></div><div></div></div>
Examples
Flanks work especially well for asides, inputs with adjacent buttons, and rich description lists.
All we have to decide is what to do with the time that is given to us. There are other forces at work in this
world, Frodo, besides the will of evil.
Boromir
One does not simply walk into Mordor. Its Black Gates are guarded by more than just Orcs. There is evil there
that does not sleep, and the Great Eye is ever watchful.
Galadriel
The world is changed. I feel it in the water. I feel it in the earth. I smell it in the air. Much that once was
is lost, for none now live who remember it.
<divclass="cs-stack cs-gap-xl"><divclass="cs-flank cs-align-items-start"><cs-avatarimage="https://images.unsplash.com/photo-1553284966-19b8815c7817?q=20"label="Gandalf's avatar"></cs-avatar><divclass="cs-stack cs-gap-3xs"><strong>Gandalf</strong><pclass="cs-body-s">
All we have to decide is what to do with the time that is given to us. There are other forces at work in this
world, Frodo, besides the will of evil.
</p></div></div><divclass="cs-flank cs-align-items-start"><cs-avatarimage="https://images.unsplash.com/photo-1542403764-c26462c4697e?q=20"label="Boromir's avatar"></cs-avatar><divclass="cs-stack cs-gap-3xs"><strong>Boromir</strong><pclass="cs-body-s">
One does not simply walk into Mordor. Its Black Gates are guarded by more than just Orcs. There is evil there
that does not sleep, and the Great Eye is ever watchful.
</p></div></div><divclass="cs-flank cs-align-items-start"><cs-avatarimage="https://images.unsplash.com/photo-1518495973542-4542c06a5843?q=20"label="Galadriel's avatar"></cs-avatar><divclass="cs-stack cs-gap-3xs"><strong>Galadriel</strong><pclass="cs-body-s">
The world is changed. I feel it in the water. I feel it in the earth. I smell it in the air. Much that once was
is lost, for none now live who remember it.
</p></div></div></div>
Position
By default, the first item in the cs-flank container will flank the other content. You can specify whether the first or last item will flank the remaining content by appending :start or :end to the cs-flank class.
The flank’s inline size is determined by the size of its content, but you can set a target size using the --flank-size custom property. When the flank wraps, it stretches to fill the inline size of the container.
The main content fills the remaining inline space of the container. By default, the items wrap when the main content is less than 50% of the container. You can change the minimum size of the main content with the --content-percentage custom property.
By default, items are centered in the block direction of the cs-flank container. Add any cs-align-items-* class to change how items line up in the block direction.
