Problem With Align-Items

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;  -->

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.

1 Like

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.

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.

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 ?

Yes, that is correct. You can play around with this Pen I created from your code.

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!