<div class='sourceset sourceset-common'>Common</div>

```kotlin
object Arrangement
```

Used to specify the arrangement of the layout's children in layouts like [Row](/jetpack-compose/androidx.compose.foundation/foundation-layout/composable-functions/Row) or [Column](/jetpack-compose/androidx.compose.foundation/foundation-layout/composable-functions/Column) in the
main axis direction (horizontal and vertical, respectively).

Below is an illustration of different horizontal arrangements in [Row](/jetpack-compose/androidx.compose.foundation/foundation-layout/composable-functions/Row)s: ![Row
arrangements](https://developer.android.com/images/reference/androidx/compose/foundation/layout/row_arrangement_visualization.gif)

Different vertical arrangements in [Column](/jetpack-compose/androidx.compose.foundation/foundation-layout/composable-functions/Column)s: ![Column
arrangements](https://developer.android.com/images/reference/androidx/compose/foundation/layout/column_arrangement_visualization.gif)

## Properties

<h2 id="arrange-object-totalsize-sizes-layoutdirection-outpositions">arrange</h2>

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val Start =
    object : Horizontal {
        override fun Density.arrange(
            totalSize: Int,
            sizes: IntArray,
            layoutDirection: LayoutDirection,
            outPositions: IntArray,
        ) =
            if (layoutDirection == LayoutDirection.Ltr) {
                placeLeftOrTop(sizes, outPositions, reverseInput = false)
            } else {
                placeRightOrBottom(totalSize, sizes, outPositions, reverseInput = true)
            }

        override fun toString() = "Arrangement#Start"
    }
```

Place children horizontally such that they are as close as possible to the beginning of the
horizontal axis (left if the layout direction is LTR, right otherwise). Visually: 123#### for
LTR and ####321.

<hr class="docs-overload-divider">

<h2 id="arrange-object-totalsize-sizes-layoutdirection-outpositions-2">arrange</h2>

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val End =
    object : Horizontal {
        override fun Density.arrange(
            totalSize: Int,
            sizes: IntArray,
            layoutDirection: LayoutDirection,
            outPositions: IntArray,
        ) =
            if (layoutDirection == LayoutDirection.Ltr) {
                placeRightOrBottom(totalSize, sizes, outPositions, reverseInput = false)
            } else {
                placeLeftOrTop(sizes, outPositions, reverseInput = true)
            }

        override fun toString() = "Arrangement#End"
    }
```

Place children horizontally such that they are as close as possible to the end of the main
axis. Visually: ####123 for LTR and 321#### for RTL.

<hr class="docs-overload-divider">

<h2 id="arrange-totalsize-sizes-outpositions">arrange</h2>

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val Top =
    object : Vertical {
        override fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray) =
            placeLeftOrTop(sizes, outPositions, reverseInput = false)

        override fun toString() = "Arrangement#Top"
    }
```

Place children vertically such that they are as close as possible to the top of the main
axis. Visually: (top) 123#### (bottom)

<hr class="docs-overload-divider">

<h2 id="arrange-totalsize-sizes-outpositions-2">arrange</h2>

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val Bottom =
    object : Vertical {
        override fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray) =
            placeRightOrBottom(totalSize, sizes, outPositions, reverseInput = false)

        override fun toString() = "Arrangement#Bottom"
    }
```

Place children vertically such that they are as close as possible to the bottom of the main
axis. Visually: (top) ####123 (bottom)

<hr class="docs-overload-divider">

<h2 id="arrange-object-totalsize-sizes-layoutdirection-outpositions-3">arrange</h2>

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val Center =
    object : HorizontalOrVertical {
        override val spacing = 0.dp

        override fun Density.arrange(
            totalSize: Int,
            sizes: IntArray,
            layoutDirection: LayoutDirection,
            outPositions: IntArray,
        ) =
            if (layoutDirection == LayoutDirection.Ltr) {
                placeCenter(totalSize, sizes, outPositions, reverseInput = false)
            } else {
                placeCenter(totalSize, sizes, outPositions, reverseInput = true)
            }

        override fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray) =
            placeCenter(totalSize, sizes, outPositions, reverseInput = false)

        override fun toString() = "Arrangement#Center"
    }
```

Place children such that they are as close as possible to the middle of the main axis.
Visually: ##123## for LTR and ##321## for RTL.

<hr class="docs-overload-divider">

<h2 id="arrange-object-totalsize-sizes-layoutdirection-outpositions-4">arrange</h2>

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val SpaceEvenly =
    object : HorizontalOrVertical {
        override val spacing = 0.dp

        override fun Density.arrange(
            totalSize: Int,
            sizes: IntArray,
            layoutDirection: LayoutDirection,
            outPositions: IntArray,
        ) =
            if (layoutDirection == LayoutDirection.Ltr) {
                placeSpaceEvenly(totalSize, sizes, outPositions, reverseInput = false)
            } else {
                placeSpaceEvenly(totalSize, sizes, outPositions, reverseInput = true)
            }

        override fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray) =
            placeSpaceEvenly(totalSize, sizes, outPositions, reverseInput = false)

        override fun toString() = "Arrangement#SpaceEvenly"
    }
```

Place children such that they are spaced evenly across the main axis, including free space
before the first child and after the last child. Visually: #1#2#3# for LTR and #3#2#1# for
RTL.

<hr class="docs-overload-divider">

<h2 id="arrange-object-totalsize-sizes-layoutdirection-outpositions-5">arrange</h2>

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val SpaceBetween =
    object : HorizontalOrVertical {
        override val spacing = 0.dp

        override fun Density.arrange(
            totalSize: Int,
            sizes: IntArray,
            layoutDirection: LayoutDirection,
            outPositions: IntArray,
        ) =
            if (layoutDirection == LayoutDirection.Ltr) {
                placeSpaceBetween(totalSize, sizes, outPositions, reverseInput = false)
            } else {
                placeSpaceBetween(totalSize, sizes, outPositions, reverseInput = true)
            }

        override fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray) =
            placeSpaceBetween(totalSize, sizes, outPositions, reverseInput = false)

        override fun toString() = "Arrangement#SpaceBetween"
    }
```

Place children such that they are spaced evenly across the main axis, without free space
before the first child or after the last child. Visually: 1##2##3 for LTR or 3##2##1 for RTL.

<hr class="docs-overload-divider">

<h2 id="arrange-object-totalsize-sizes-layoutdirection-outpositions-6">arrange</h2>

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val SpaceAround =
    object : HorizontalOrVertical {
        override val spacing = 0.dp

        override fun Density.arrange(
            totalSize: Int,
            sizes: IntArray,
            layoutDirection: LayoutDirection,
            outPositions: IntArray,
        ) =
            if (layoutDirection == LayoutDirection.Ltr) {
                placeSpaceAround(totalSize, sizes, outPositions, reverseInput = false)
            } else {
                placeSpaceAround(totalSize, sizes, outPositions, reverseInput = true)
            }

        override fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray) =
            placeSpaceAround(totalSize, sizes, outPositions, reverseInput = false)

        override fun toString() = "Arrangement#SpaceAround"
    }
```

Place children such that they are spaced evenly across the main axis, including free space
before the first child and after the last child, but half the amount of space existing
otherwise between two consecutive children. Visually: #1##2##3# for LTR and #3##2##1# for RTL

## Functions

<hr class="docs-overload-divider">

<h2 id="spacedby-space">spacedBy</h2>

```kotlin
fun spacedBy(space: Dp): HorizontalOrVertical
```

Place children such that each two adjacent ones are spaced by a fixed `space` distance across
the main axis. The spacing will be subtracted from the available space that the children can
occupy. The `space` can be negative, in which case children will overlap.

To change alignment of the spaced children horizontally or vertically, use [spacedBy](#spacedby)
overloads with `alignment` parameter.

#### Parameters

| | |
| --- | --- |
| space | The space between adjacent children. |

<hr class="docs-overload-divider">

<h2 id="spacedby-space-alignment">spacedBy</h2>

```kotlin
fun spacedBy(space: Dp, alignment: Alignment.Horizontal): Horizontal
```

Place children horizontally such that each two adjacent ones are spaced by a fixed `space`
distance. The spacing will be subtracted from the available width that the children can
occupy. An [alignment](/jetpack-compose/androidx.compose.ui/ui/interfaces/Alignment) can be specified to align the spaced children horizontally inside the
parent, in case there is empty width remaining. The `space` can be negative, in which case
children will overlap.

#### Parameters

| | |
| --- | --- |
| space | The space between adjacent children. |
| alignment | The alignment of the spaced children inside the parent. |

<hr class="docs-overload-divider">

<h2 id="spacedby-space-alignment-2">spacedBy</h2>

```kotlin
fun spacedBy(space: Dp, alignment: Alignment.Vertical): Vertical
```

Place children vertically such that each two adjacent ones are spaced by a fixed `space`
distance. The spacing will be subtracted from the available height that the children can
occupy. An [alignment](/jetpack-compose/androidx.compose.ui/ui/interfaces/Alignment) can be specified to align the spaced children vertically inside the
parent, in case there is empty height remaining. The `space` can be negative, in which case
children will overlap.

#### Parameters

| | |
| --- | --- |
| space | The space between adjacent children. |
| alignment | The alignment of the spaced children inside the parent. |

<hr class="docs-overload-divider">

<h2 id="aligned-alignment">aligned</h2>

```kotlin
fun aligned(alignment: Alignment.Horizontal): Horizontal
```

Place children horizontally one next to the other and align the obtained group according to
an [alignment](/jetpack-compose/androidx.compose.ui/ui/interfaces/Alignment).

#### Parameters

| | |
| --- | --- |
| alignment | The alignment of the children inside the parent. |

<hr class="docs-overload-divider">

<h2 id="aligned-alignment-2">aligned</h2>

```kotlin
fun aligned(alignment: Alignment.Vertical): Vertical
```

Place children vertically one next to the other and align the obtained group according to an
[alignment](/jetpack-compose/androidx.compose.ui/ui/interfaces/Alignment).

#### Parameters

| | |
| --- | --- |
| alignment | The alignment of the children inside the parent. |