Treehouse: Grow your CSS skills. Land your dream job.
CSS Almanac » Properties » A » align-items

align-items

Last updated on:

The align-items property is a sub-property of the Flexible Box Layout module.

It defines the default behaviour for how flex items are laid out along the cross axis on the current line. You can think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

The align-items property accepts 5 different values:

  • flex-start: cross-start margin edge of the items is placed on the cross-start line
  • flex-end: cross-end margin edge of the items is placed on the cross-end line
  • center: items are centered in the cross-axis
  • baseline: items are aligned such as their baselines align
  • stretch (default): stretch to fill the container (still respect min-width/max-width)

The following figure helps understand how flex items are layed out depending on the align-items value.

align-items

Syntax

align-items: flex-start | flex-end | center | baseline | stretch

.flex-container {
  align-items: flex-start;
}

Demo

The following demo shows how flex items are layed out depending on the align-items value:

  • The red list is set to flex-start
  • The yellow list is set to flex-end
  • The blue list is set to center
  • The green list is set to baseline
  • The pink list is set to stretch
Check out this Pen!

Related Properties

Other Resources

Browser Support

  • (modern) means the recent syntax from the specification (e.g. display: flex;)
  • (hybrid) means an odd unofficial syntax from 2011 (e.g. display: flexbox;)
  • (old) means the old syntax from 2009 (e.g. display: box;)
Chrome Safari Firefox Opera IE Android iOS
21+ (modern)
20- (old)		 3.1+ (old) 2-21 (old)
22+ (new)		 12.1+ (modern) 10+ (hybrid) 2.1+ (old) 3.2+ (old)

Blackberry browser 10+ supports the new syntax.

For more informations about how to mix syntaxes in order to get the best browser support, please refer to this article (CSS-Tricks) or this article (DevOpera).

Comments

  1. Leevi Graham
    Permalink to comment#

    There is an edge case bug with Firefox and align-items: baseline.

    https://bugzilla.mozilla.org/show_bug.cgi?id=1036404

    Reply ↓
  2. Mehrdad
    Permalink to comment#

    Thank you very much
    This training was very useful for me.

    Reply ↓
  3. matt
    Permalink to comment#

    Question for you, on the codepen demo ‘baseline’ case, let’s say I wanted that 3rd green box to align to the “5” instead of the 4. How would I do that?

    Reply ↓

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Go PRO on CodePen

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

Signup for The Lodge

Peruse Jobs!

Always good to keep your eye on the field.

If you're looking to hire, posting your job on the CodePen job board means it will be shown here on CSS-Tricks and on the ShopTalk job board as well.

Post a Job

We can do the real footer now.