# CSS Flexbox: align-items

Hello Fellow Codenewbies 👋

By default, flex is stretching the height of the items based on the highest item.

![default.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1608035336738/hz54YX3AS.jpeg)

But when we need to, we can control the vertical position (*cross axis*) of the items with [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).

---
# Controlling The Vertical Position of Flex Items

`align-items` property is good to be applied when we have an element that has background color/shadow/borders so we can see the effect.

## The Values of `align-items`

### flex-start
It aligns the items on the ***top*** (start) of the flex container, and the height of each item is maintained as it is.
<br>
⭐ This value is used most often to control the vertical position of flex items.

![flex-start.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1608113330122/VurycDF5d.jpeg)

### center
It aligns the items vertically on the ***center*** of the flex container.

![center.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1608113771712/j6HQ_ZxPX.jpeg)

### flex-end
It aligns the items on the ***bottom*** (end) of the flex container.

![flex-end.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1608113936114/Gu3AruN1V.jpeg)

### stretch
This is the **default** value of `align-items`.
<br>
It stretches the height of the items based on the highest item.
<br>
Usually, it is used if we need to reset or override an applied value.

![stretch.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1608114514346/lMZW16-81.jpeg)

### baseline
It aligns the items ***based on the first line of texts*** to be in line with each other.
<br>
This value is barely used and we only can see the effect when we have elements with text in them.

![baseline.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1608114837348/mBzJoUMYH.jpeg)

#### Playground
I provide here the Codepen for you to play around with.

%[https://codepen.io/adiati/pen/eYdZYWO]

## Conclusion

- `align-items` property works with *cross axis* (vertical position) and is used when we want or need to control the vertical position of flex items in a flex container.

- The values of `align-items` that we need to know are:
  - flex-start
  - center
  - flex-end
  - stretch (***default***)
  - baseline