One
Item two
The item we will refer to as three
```
To use flexbox you need to declare that you want to use a flex formatting context and not regular
block and inline layout.
Do this by changing the value of the `display` property to `flex`.
```css
.container {
display: flex;
}
```
As you learned in the [layout guide](https://web.dev/learn/css/layout.md.txt) this will give you a block-level box,
with flex item children.
The flex items immediately start exhibiting some flexbox behavior, using their **initial values**.
> [!NOTE]
> **Note:** All CSS properties have initial values which control how they behave "out of the box" when you haven't applied any CSS to change that initial behavior. The children of our flex container become flex items as soon as their parent gets `display: flex`, so these initial values mean that we start seeing some flexbox behavior.
The initial values mean that:
- Items display as a row.
- They do not wrap.
- They do not grow to fill the container.
- They line up at the start of the container.
## Controlling the direction of items
Even though you haven't added a `flex-direction` property yet,
the items display as a row because the initial value of `flex-direction` is `row`.
If you want a row then you don't need to add the property.
To change the direction, add the property and one of the four values:
- `row`: the items lay out as a row.
- `row-reverse:` the items lay out as a row from the end of the flex container.
- `column`: the items lay out as a column.
- `column-reverse` : the items lay out as a column from the end of the flex container.
You can try out all of the values using our group of items in the demo below.