{
  "name": "utilities/align-items",
  "title": "Align Items",
  "description": "Control cross-axis alignment in flex and grid containers with align-items and align-self utility classes.",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/align-items/",
  "sections": [
    {
      "heading": "Align Items",
      "markdown": "eurodata-ui includes classes to set the `align-items` property of flex and grid containers. Use these `ed-align-items-*` classes alongside other eurodata-UI layout utilities, like [cluster](https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/cluster) and [stack](https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/stack), to align items in a container on the container's [cross axis](https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/align-items/#whats-the-cross-axis).\n\n| Class Name | align-items Value |\n| --- | --- |\n| `ed-align-items-baseline` | `baseline` |\n| `ed-align-items-center` | `center` |\n| `ed-align-items-end` | `flex-end` |\n| `ed-align-items-start` | `flex-start` |\n| `ed-align-items-stretch` | `stretch` |"
    },
    {
      "heading": "Override with Align Self",
      "markdown": "When you need a flex or grid item to deviate from the `align-items` property of its container, use the `ed-align-self-*` classes to set the item's `align-self` property and individually change its alignment on the container's [cross axis](https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/align-items/#whats-the-cross-axis).\n\n| Class Name | align-self Value |\n| --- | --- |\n| `ed-align-self-center` | `center` |\n| `ed-align-self-baseline` | `baseline` |\n| `ed-align-self-end` | `flex-end` |\n| `ed-align-self-start` | `flex-start` |\n| `ed-align-self-stretch` | `stretch` |"
    },
    {
      "heading": "What's the Cross Axis?",
      "markdown": "The cross axis runs perpendicular to a container's content direction. For containers where `flex-direction` is `row` and content flows in the inline direction, the cross axis runs in the block direction. For containers where `flex-direction` is `column` and content flows in the block direction, the cross axis runs in the inline direction."
    }
  ]
}