{ "name": "utilities/flank", "title": "Flank", "description": "Use the `ed-flank` class to position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space.", "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/flank/", "sections": [ { "heading": "Flank", "markdown": "Use the `ed-flank` class to position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space. When space is limited, the items wrap.\n\n```html\n
\n
\n
\n
\n```" }, { "heading": "Examples", "markdown": "Flanks work especially well for asides, inputs with adjacent buttons, and rich description lists.\n\n```html\n
\n \n \n \n Search\n
\n```\n\n```html\n
\n
\n \n
\n Gandalf\n

\n 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\n world, Frodo, besides the will of evil.\n

\n
\n
\n
\n \n
\n Boromir\n

\n One does not simply walk into Mordor. Its Black Gates are guarded by more than just Orcs. There is evil there\n that does not sleep, and the Great Eye is ever watchful.\n

\n
\n
\n
\n \n
\n Galadriel\n

\n 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\n is lost, for none now live who remember it.\n

\n
\n
\n
\n```" }, { "heading": "Position", "markdown": "By default, the first item in the `ed-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 `ed-flank` class.\n\n```html\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n```" }, { "heading": "Sizing", "markdown": "The flank's inline size is determined by the size of its content, but you can set a target size using the `--ed-flank-size` property. When the flank wraps, it stretches to fill the inline size of the container.\n\n```html\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n```\n\nThe 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 `--ed-flank-content-percentage` property.\n\n```html\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n```" }, { "heading": "Align Items", "markdown": "By default, items are centered in the block direction of the `ed-flank` container. You can add any of the following [`ed-align-items-*`](https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/align-items) classes to an element with `ed-flank` to specify how items are aligned in the block direction:\n\n- `ed-align-items-start`\n- `ed-align-items-end`\n- `ed-align-items-center`\n- `ed-align-items-stretch`\n- `ed-align-items-baseline`\n\n```html\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n```" }, { "heading": "Gap", "markdown": "By default, the gap between flank items uses `--ed-space-4` from your theme. Add any [`ed-gap-N`](https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/gap) class (N from 0 to 16) to an element with `ed-flank` to specify the gap between items.\n\n```html\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n```" } ] }