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?
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 ?
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!
Creating engaging and entertaining content for designers and developers since 1998.