--description--

<iframe allowfullscreen="true" allowpaymentrequest="true" style="margin: 15px 0" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>

To change the placement of items along the cross axis use align-items. Try getting the boxes to the center of the container by adding align-items: center to .container. The desired result looks like this:

Because justify-content and align-items are based on the main and cross axis of your container, their behavior changes when you change the flex-direction of a flex-container. For example, when you change flex-direction to column, justify-content aligns vertically and align-items aligns horizontally. The most common behavior, however, is the default, i.e. justify-content aligns items horizontally (because the main axis defaults to horizontal), and align-items aligns them vertically. One of the biggest sticking points that beginners have with flexbox is confusion when this behavior changes.

--assignment--

Before moving on to the next lesson, see if you can figure out how align-items behaves when you change the flex-direction property to column.

--questions--

--text--

When changing the flex-direction property to column in a flex container, how does align-items behave in relation to the flex items?

--answers--

It distributes space between items evenly.

---

It aligns items horizontally along the main axis.

---

It centers items vertically along the cross axis.

---

It aligns items to the start of the container along the cross axis.

--video-solution--

3