By Dinh


2014-12-18 04:29:40 8 Comments

Can anybody show me the difference between align-items and align-content?

10 comments

@bajran 2020-05-04 05:53:06

What I have learned from every answer and visiting the blog is

what is the cross axis and main axis

  • main axis is horizontal row and cross axis is vertical column - for flex-direction: row
  • main axis is vertical column and cross axis is horizontal row - for flex-direction: column

Now align-content and align-items

align-content is for the row, it works if the container has (more than one row) Properties of align-content

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

align-items is for the items in row Properties of align-items

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

For more reference visit to flex

@run_the_race 2020-06-22 10:35:03

Having read some of the answers, they identify correctly that align-content takes no affect if the flex content is not wrapped. However what they don't understand is align-items still plays an important role when there is wrapped content:

In the following two examples, align-items is used to center the items within each row, then we change align-content to see it's effect.

Example 1:

align-content: flex-start;

enter image description here

Example 2:

    align-content: flex-end;

enter image description here

Here's the code:

<div class="container">
    <div class="child" style="height: 30px;">1</div>
    <div class="child" style="height: 50px;">2</div>
    <div class="child" style="height: 60px;">3</div>
    <div class="child" style="height: 40px;">4</div>
    <div class="child" style="height: 50px;">5</div>
    <div class="child" style="height: 20px;">6</div>
    <div class="child" style="height: 90px;">7</div>
    <div class="child" style="height: 50px;">8</div>
    <div class="child" style="height: 30px;">9</div>
    <div class="child" style="height: 40px;">10</div>
    <div class="child" style="height: 30px;">11</div>
    <div class="child" style="height: 60px;">12</div>
</div>

<style>
.container {
    display: flex;
    width: 300px;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-end;
    background: lightgray;
    height: 400px;
}
.child {
    padding: 12px;
    background: red;
    border: solid 1px black;
}
</style>

@Shan Dou 2018-12-26 23:00:24

I had the same confusion. After some tinkering based on many of the answers above, I can finally see the differences. In my humble opinion, the distinction is best demonstrated with a flex container that satisfies the following two conditions:

  1. The flex container itself has a height constraint (e.g., min-height: 60rem) and thus can become too tall for its content
  2. The child items enclosed in the container have uneven heights

Condition 1 helps me understand what content means relative to its parent container. When the content is flush with the container, we will not be able to see any positioning effects coming from align-content. It is only when we have extra space along the cross axis, we start to see its effect: It aligns the content relative to the boundaries of the parent container.

Condition 2 helps me visualize the effects of align-items: it aligns items relative to each other.


Here is a code example. Raw materials come from Wes Bos' CSS Grid tutorial (21. Flexbox vs. CSS Grid)

  • Example HTML:
  <div class="flex-container">
    <div class="item">Short</div>
    <div class="item">Longerrrrrrrrrrrrrr</div>
    <div class="item">ūüí©</div>
    <div class="item" id="tall">This is Many Words</div>
    <div class="item">Lorem, ipsum.</div>
    <div class="item">10</div>
    <div class="item">Snickers</div>
    <div class="item">Wes Is Cool</div>
    <div class="item">Short</div>
  </div>
  • Example CSS:
.flex-container {
  display: flex;
  /*dictates a min-height*/
  min-height: 60rem;
  flex-flow: row wrap;
  border: 5px solid white;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
 }

#tall {
  /*intentionally made tall*/
  min-height: 30rem;
}

.item {
  margin: 10px;
  max-height: 10rem;
}

Example 1: Let's narrow the viewport so that the content is flush with the container. This is when align-content: flex-start; has no effects since the entire content block is tightly fit inside the container (no extra room for repositioning!)

Also, note the 2nd row--see how the items are center aligned among themselves.

enter image description here

Example 2: As we widen the viewport, we no longer have enough content to fill the entire container. Now we start to see the effects of align-content: flex-start;--it aligns the content relative to the top edge of the container. enter image description here


These examples are based on flexbox, but the same principles are applicable to CSS grid. Hope this helps :)

@Goldenmoon 2017-09-10 15:58:47

according to what I understood from here:

when you use align-item or justify-item, you are adjusting "the content inside a grid item along the column axis or row axis respectively.

But: if you use align-content or justify-content, you are setting the position a grid along the column axis or the row axis. it occurs when you have a grid in a bigger container and width or height are inflexible (using px).

@run_the_race 2020-06-22 10:19:29

This is inaccurate and confusing. align-items is not fixed to controlling the column, but dependings on the flex-direction. Similarly align-content is not only for column axis, and justify-content is not only for the row axis. justify-itemS has nothing to do with flex box.

@Alireza Fattahi 2017-08-16 12:06:48

I find the example http://flexboxfroggy.com/ very useful.

It will take you 10-20 minutes and at level 21 you will find the answer to your question. It mentioned:

align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect

@Spikatrix 2019-02-18 05:44:46

Indeed, I did find the froggy example really useful. Learned a lot from it.

@simi 2017-05-28 06:58:32

The main difference is when the height of the elements are not the same! Then you can see how in the row, they are all center\end\start

@run_the_race 2020-06-22 10:14:06

This does not explain the difference.

@Uday Hiwarale 2016-05-29 10:46:41

First, align-items is for items in a single row. So for a single row of elements on main axis, align-items will align these items respective of each other and it will start with fresh perspective from the next row.

Now, align-content doesn't interfere with items in a row but with rows itself. Hence, align-content will try to align rows with respect to each other and flex container.

Check this fiddle : https://jsfiddle.net/htym5zkn/8/

@Asim K T 2016-01-22 10:40:35

The align-items property of flex-box aligns the items inside a flex container along the cross axis just like justify-content does along the main axis. (For the default flex-direction: row the cross axis corresponds to vertical and the main axis corresponds to horizontal. With flex-direction: column those two are interchanged respectively).

Here's an example of how align-items:center looks:

align-items: center

But align-content is for multi line flexible boxes. It has no effect when items are in a single line. It aligns the whole structure according to its value. Here's an example for align-content: space-around;: enter image description here

And here's how align-content: space-around; with align-items:center looks: enter image description here

Note the 3rd box and all other boxes in first line change to vertically centered in that line.

Here are some codepen links to play with:

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

Here's a super cool pen which shows and lets you play with almost everything in flexbox.

@Michael Benjamin 2016-01-29 17:09:15

Note that the align-* properties can also shift flex items horizontally. It depends on the flex-direction. stackoverflow.com/q/32551291/3597276

@ortonomy 2020-03-12 02:17:53

This is easily the best explanation. Everyone else fails miserably.

@Adam 2020-05-02 22:07:33

> "But align-content is for multi line flexible boxes. It has no effect when items are in a single line" -- this appears to not be true, or not be honoured, in latest Firefox (May 2020). Instead, if there's a single flex-line (all content fits within less than the main-axis length) which is less than full height (cross-axis size is less than full available), then align-content if set will obliterate align-items. This makes sense: it applies to ANY lines it finds?

@ahnbizcad 2016-08-25 16:39:52

align-content

align-content controls the cross-axis (i.e. vertical direction if the flex-direction is row, and horizontal if the flex-direction is column) positioning of multiple lines relative to each other.

(Think lines of a paragraph being vertically spread out, stacked toward the top, stacked toward the bottom. This is under a flex-direction row paradigm).

align-items

align-items controls the cross-axis of an individual line of flex elements.

(Think how an individual line of a paragraph is aligned, if it contains some normal text and some taller text like math equations. In that case, will it be the bottom, top, or center of each type of text in a line that will be aligned?)

@TheNegative 2015-06-19 19:54:52

Well I have examined them on my browser.

align-content can change a line's height for row direction or width for column when it's value is stretch, or add empty space between or around the lines for space-between, space-around, flex-start, flex-end values.

align-items can change items height or position inside the line's area. When items are not wrapped they have only one line which it's area is always stretched to the flex-box area (even if the items overflow), and align-content has no effect on a single line. So it has no effect on items that are not wrapped and only align-items can change items position or stretch them when all of them are on a single line.

However, if they are wrapped you have multiple lines and items inside each line. And if all items of each line have the same height (for row direction) that line's height will be equal to those items height and you don't see any effect by changing align-items value.

So if you want to affect items by align-items when your items are wrapped and have the same height (for row direction) first you have to use align-content with stretch value in order to expand the lines area.

Related Questions

Sponsored Content

6 Answered Questions

[SOLVED] In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

23 Answered Questions

[SOLVED] Make the cursor a hand when a user hovers over a list item

  • 2010-06-21 19:45:44
  • user246114
  • 1977372 View
  • 1967 Score
  • 23 Answer
  • Tags:   css

22 Answered Questions

[SOLVED] Vertically align text next to an image?

40 Answered Questions

[SOLVED] Better way to set distance between flexbox items

  • 2013-12-17 05:35:30
  • Sasha Koss
  • 999996 View
  • 802 Score
  • 40 Answer
  • Tags:   css flexbox

35 Answered Questions

[SOLVED] How to vertically align an image inside a div

39 Answered Questions

[SOLVED] How to align checkboxes and their labels consistently cross-browsers

25 Answered Questions

[SOLVED] How to align content of a div to the bottom

13 Answered Questions

[SOLVED] What's the difference between SCSS and Sass?

  • 2011-04-13 19:23:09
  • bruno077
  • 819654 View
  • 1921 Score
  • 13 Answer
  • Tags:   css sass

Sponsored Content