# Flexbox

The Flexbox control is one of Stadium's Layout controls. You can use Flexbox to display items on a single row or in a single column.

Flexbox renders as a [standard CSS Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox), which means that you can style your Flexbox as you would a standard CSS Flexbox.

***

### Properties

1. **Direction**

   Render the items you add to the Flexbox horizontally (row) or vertically (column).
2. **Inline**

   Affects the 'display' CSS property of the control.
3. **Visible**

   Set to False if you don't want this control to render on the page and be visible to the user.

***

### Adding items to a Flexbox

**Single row**

![](https://3514041584-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxH8JA8xG3I22tiZG5H6%2Fuploads%2Fgit-blob-0cf2f50bdf89d630db73efb46759ea7cfda4af10%2Fflexbox1.png?alt=media)

1. Set your Flexbox's *Direction* property to "Row".
2. Add your items one next to the other inside the Flexbox control.

**Single column**

![](https://3514041584-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxH8JA8xG3I22tiZG5H6%2Fuploads%2Fgit-blob-8e2caf257f6f1569850fa4d0d414599de90f9925%2Fflexbox2.png?alt=media)

1. Set your Flexbox's *Direction* property to "Column".
2. Add your items one below the other inside the Flexbox control.

**Multiple rows and columns**

![](https://3514041584-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxH8JA8xG3I22tiZG5H6%2Fuploads%2Fgit-blob-ce18bd3097c43292b0aa3223e629a2fc0ee76635%2Fflexbox3.png?alt=media)

To create a combination of columns and rows you can add Container controls to your Flexbox. Inside the Container controls you can add multiple items on the same row or column.

For example, if you are creating a Flexbox that is intended to predominantly display on a single row, with one item on the row displaying sub-items in a column (i.e. one item below the next), do this:

1. Set your Flexbox's *Direction* property to "Row".
2. Add a Container control as one of the items in the Flexbox row.
3. Add the relevant sub-items one below the other inside the Container control.

***

### CSS Help

Go [here](https://docs.stadium.software/controls/css-for-flexbox) for CSS code snippets that you can use in styling your Flexbox and the controls inside your Flexbox.