# 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**

![](/files/mxd176YKMtYWWL8oPkHZ)

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

**Single column**

![](/files/NYNBau3qbf2uOi9Rpuyb)

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**

![](/files/JNo7f1zcvnwXKVxIUkKi)

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](/controls/css-for-flexbox.md) for CSS code snippets that you can use in styling your Flexbox and the controls inside your Flexbox.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.stadium.software/controls/flexbox.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.