This is the first container item
This is the second container item
```
The following css code will apply the Flexbox model, filling the parent's container equally with its children containers and content:
``` css
.main-container {
display: flex;
}
.container-item {
flex: 1;
}
```
In this example, the parent container is utilizing the property display set to the value of flex. This will allow children of the main container to make use of the flex property.
Another basic example of using the Flexbox model is the following code - used for the purpose of centering content within a parent container:
``` css
.center-elements-inside {
display: flex;
flex-direction: row;
justify-content: center;
}
```
Let's break down this example. First we set the display property to "flex" so we can apply our flexbox properties. Next we declare the way flexbox will handle our elements. This can either be in a row or in a column. Setting it to row will align the elements horizontal inside the element. The column will align them vertical.
Now lets have a short look at "justify-content". This property declares how elements are distributed inside the parent element. We chose the "center" value. This means all elements inside this element will be centered. "Flex-start" will align everything to the left, and "flex-end" to the right.
There are three slightly more interesting options for `justify-content` you might want to try out. "space-between" will evenly space the children out across the available space, pushing the outermost children to the edges. "space-evenly" ensures the same amount of space between the items; this can look a little more centralized. "space-around" gives them equal space all around themselves, a little like a margin - two adjacent children will have double the space where they touch, and only a single amount where they're alongside the border.
`justify-content` defines the behavior of child elements on the main axis. What about vertical? This is where you'll need `align-items`, which defines how items lie on the cross-axis. Keep in mind that whether you're in a row or a column will determine what your main and your cross axis is.
`flex-start`, `center` and `flex-end` behave as before - left, center and right have become top, center and bottom. Other options are `baseline`, whereby all children will centralize themselves down a single baseline, and `stretch`, whereby they will stretch to fill the container.
#### More Information
- To get a complete understanding of Flexbox, read