{
  "name": "utilities/justify-content",
  "title": "Justify Content",
  "description": "Justify content utilities determine how space is distributed between items in flex and grid containers.",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/justify-content/",
  "sections": [
    {
      "heading": "Justify Content",
      "markdown": "eurodata-ui includes classes to set the `justify-content` property of flex and grid containers. Use them alongside other eurodata-ui layout utilities, like [cluster](https://test-apps.eurodata.de/docs/utilities/cluster) and [stack](https://test-apps.eurodata.de/docs/utilities/stack), to distribute space between items along the container's [main axis](https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/justify-content/#whats-the-main-axis).\n\n| Class Name | justify-content Value |\n| --- | --- |\n| `ed-justify-content-start` | `flex-start` |\n| `ed-justify-content-end` | `flex-end` |\n| `ed-justify-content-center` | `center` |\n| `ed-justify-content-space-around` | `space-around` |\n| `ed-justify-content-space-between` | `space-between` |\n| `ed-justify-content-space-evenly` | `space-evenly` |"
    },
    {
      "heading": "What's the Main Axis?",
      "markdown": "The main axis runs parallel to a container's content direction. For grid containers and flex containers where `flex-direction` is `row`, the main axis runs in the inline direction. For containers where `flex-direction` is `column`, the main axis runs in the block direction."
    }
  ]
}