# Problem With Align-Items

**URL:** <https://forum.kirupa.com/t/problem-with-align-items/645588>\
**Category:** Uncategorized\
**Created:** [January 5, 2021, 6:33pm UTC](https://forum.kirupa.com/t/problem-with-align-items/645588 "2021-01-05T18:33:24Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 5, 2021, 6:33pm UTC](https://forum.kirupa.com/t/problem-with-align-items/645588/1 "2021-01-05T18:33:24Z")

</div>

I am playing with 3 values of align-items for my div -  
flex-start  
flex-end  
flex-center  
Flex-start places all 4 elements to the left of my div as I would expect.  
Flex-end puts all 4 to the right which is also what I would expect.  
Flex-center does NOT place the 4 in the center as I would have expected but at the Left side. What is going on?

```
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Redressed&display=swap" rel="stylesheet">
    <style>
        div {
            margin-top: 50px;
            height: 500px;
            width: 1000px;
            background-color: rgb(61, 127, 185);
            color: white;
            display: flex;
            flex-direction: column;
            align-items: flex-center;
        }

        h1 {
            font-family: 'Redressed', cursive;
            color: rgb(14, 133, 212);

            margin-left: 0px;
            color: white;
        }

        .wolf {
            width: 200px;
        }
    </style>
</head>

<body>
    <div>

        <h1>The Arctic Fox</h1>
        <h2>They Are Found North of the 60th Parallel</h2>
        <img class="wolf"
            src="https://kpbs.media.clients.ellingtoncms.com/img/croppedphotos/2018/01/16/Nature_Arctic_Wolf_Pack_Lead2_t800.jpg?90232451fbcadccc64a17de7521d859a8f88077d"
            alt="arctic wolf">
        <img src="https://cdn.shopify.com/s/files/1/0249/7381/products/ArcticFoxImage_1024x1024.jpg?v=1585683068"
            width="240" alt="life is fun when you're young">

    </div>

</body>

</html>
<!-- font-family: 'Redressed', cursive; -->
```

---

<div class="post-metadata">

**Author:** ![travis](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/travis/32/13217_2.png) [@travis](https://forum.kirupa.com/u/travis)\
**Post date:** [January 5, 2021, 6:37pm UTC](https://forum.kirupa.com/t/problem-with-align-items/645588/2 "2021-01-05T18:37:41Z")

</div>

I believe you are looking for `align-items: center` to align the items vertically in the center. Kind of confusing but `flex-center` is not a property.

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 6, 2021, 7:39pm UTC](https://forum.kirupa.com/t/problem-with-align-items/645588/3 "2021-01-06T19:39:59Z")

</div>

Thanks for your insight. Of course, we have  
flex-start  
flex-end  
center NOT as I have done, flex-center. But this brings up another question that I have just thought of. Since I have a column of elements in my div - why am I using align-items to move them horizontally across the div even though this does work. Shouldn’t I be using the justify-content rule? (which strangely enough does not work.

---

<div class="post-metadata">

**Author:** ![travis](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/travis/32/13217_2.png) [@travis](https://forum.kirupa.com/u/travis)\
**Post date:** [January 6, 2021, 9:15pm UTC](https://forum.kirupa.com/t/problem-with-align-items/645588/4 "2021-01-06T21:15:11Z")

</div>

> [@John\_Stern](#):
>
> ```auto
> <div>
> 
> <h1>The Arctic Fox</h1>
> <h2>They Are Found North of the 60th Parallel</h2>
> <img class="wolf"
> src="https://kpbs.media.clients.ellingtoncms.com/img/croppedphotos/2018/01/16/Nature_Arctic_Wolf_Pack_Lead2_t800.jpg?90232451fbcadccc64a17de7521d859a8f88077d"
> alt="arctic wolf">
> <img src="https://cdn.shopify.com/s/files/1/0249/7381/products/ArcticFoxImage_1024x1024.jpg?v=1585683068"
> width="240" alt="life is fun when you're young">
> 
> </div>
> 
> ```

Looking at this further I need to amend my previous answer.  
`justify-content` and `align-items` are relative to the `flex-direction`.  
Specifying `flex-direction: column` changes the effect of `align-items` to a center alignment, see [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#alignment_and_flex-direction).

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 7, 2021, 2:20am UTC](https://forum.kirupa.com/t/problem-with-align-items/645588/5 "2021-01-07T02:20:43Z")

</div>

OK - let’s see whether I understand you.  
For - flex-direction:row  
justify-content does horizontal moves  
align-items does vertical moves  
So does this flip for - flex-direction:column ?  
In that now -  
justify-content does vertical moves  
align-items does horizontal moves ?

---

<div class="post-metadata">

**Author:** ![travis](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/travis/32/13217_2.png) [@travis](https://forum.kirupa.com/u/travis)\
**Post date:** [January 7, 2021, 12:45pm UTC](https://forum.kirupa.com/t/problem-with-align-items/645588/6 "2021-01-07T12:45:00Z")

</div>

Yes, that is correct. You can play around with this [Pen](https://codepen.io/tfantina/pen/jOMKBOm) I created from your code.

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 7, 2021, 3:18pm UTC](https://forum.kirupa.com/t/problem-with-align-items/645588/7 "2021-01-07T15:18:56Z")

</div>

That was a very nice illustrative example. Much appreciated. I did play around with it and it’s a great learning tool. I do have one further question as a result -  
so for your example where  
display; flex  
flex-direction: row  
justify-content: center  
align-items: center  
If we only look at the justify-content property - then in my particular instance - it makes no difference which value we use -  
flex-start  
flex-end  
center  
space-between  
space-around  
the output will look the same. I am guessing that is because the 4 elements are so tightly packed into the horizontal space that they just can’t move no matter what the value assigned to justify-content is. Is that correct?  
On a final note, it was a surprise to have it confirmed for me that depending on the flex-direction - the properties - justify-content and align-items - switch their orientation. Now I’ll never forget this oddity!