---
title: Column
---
# Column

The Column widget is used to create a vertical layout. It is one of the most used widgets.

![](https://fftefqqvfkkewuokofds.supabase.co/storage/v1/object/public/theta-assets/docs/column/Frame%20378.png)

For a column the *Main Axis* and the *Cross Axis* are two important column properties.

The Main Axis runs vertically, and the Cross Axis runs horizontally. By default, all the children inside the column will be arranged in a vertical fashion.

## Adjust the Main Axis Alignment

The Main Axis for a Column Widget is the vertical axis, so adjusting this will change how the child widgets are vertically distributed in the column.

You can adjust the main axis alignment using the following options:

**Start (<img
  src="https://fftefqqvfkkewuokofds.supabase.co/storage/v1/object/public/theta-assets/docs/column/Start.png"
  style="display: inline-block; margin: 0 auto; max-width: 32px">)**: Place children elements as close to the beginning as possible.

**Center (<img
  src="https://fftefqqvfkkewuokofds.supabase.co/storage/v1/object/public/theta-assets/docs/column/center.png"
  style="display: inline-block; margin: 0 auto; max-width: 32px">)**: Place children elements as close to the middle as possible.

**End (<img
  src="https://fftefqqvfkkewuokofds.supabase.co/storage/v1/object/public/theta-assets/docs/column/end.png"
  style="display: inline-block; margin: 0 auto; max-width: 32px">)**: Place children elements as close to the end as possible.

**Space Evenly (<img
  src="https://fftefqqvfkkewuokofds.supabase.co/storage/v1/object/public/theta-assets/docs/column/space%20evenly.png"
  style="display: inline-block; margin: 0 auto; max-width: 32px">)**: Evenly space children elements.

**Space Between (<img
  src="https://fftefqqvfkkewuokofds.supabase.co/storage/v1/object/public/theta-assets/docs/column/space%20between.png"
  style="display: inline; max-width: 32px">)**: Place the free space evenly between the children.

****Adjust the Cross Axis Alignment****

The Cross Axis for a Column Widget is the horizontal axis, so adjusting this will change how the child widgets are horizontally distributed in the column.

You can adjust the cross axis alignment using the following options:

**Start (<img
  src="https://fftefqqvfkkewuokofds.supabase.co/storage/v1/object/public/theta-assets/docs/column/Start.png"
  style="display: inline-block; margin: 0 auto; max-width: 32px">)**: Place child elements as close to the beginning as possible.

**Center (<img
  src="https://fftefqqvfkkewuokofds.supabase.co/storage/v1/object/public/theta-assets/docs/column/center.png"
  style="display: inline-block; margin: 0 auto; max-width: 32px">)**: Place child elements as close to the middle as possible.

**End (<img
  src="https://fftefqqvfkkewuokofds.supabase.co/storage/v1/object/public/theta-assets/docs/column/space%20evenly.png"
  style="display: inline-block; margin: 0 auto; max-width: 32px">)**: Place child elements as close to the end as possible.

**Stretch (<img
  src="https://fftefqqvfkkewuokofds.supabase.co/storage/v1/object/public/theta-assets/docs/column/strech.png"
  style="display: inline; max-width: 32px">)**: Make the child fill the cross axis (horizontally).