Can 'align-items' and 'justify-content' be used together?

HTML-CSS
1

Hi,
In the lesson, ‘CSS Flexbox: Align Elements Using the align-items Property’, we’re taught about ‘align-items’. align-items and justify-content work on different axis, right? So, ideally, there can’t be a case where we would be using these two together or am I wrong?
I think if we use these two together, no matter what properties we set, it won’t have any effect on the CSS, right? (Atleast this is what happened with me)

Also, what is the need of using align-item? Like, if you have a stack of divs and you want to style it vertically, then just use ‘flex-direction: column’ and ‘justify-content’ with it. ‘align-item’ is basically doing the same thing, it’s actually changing row direction to column and vice versa

2

Definitely, you can use both,

Align-item will make the items align vertically center and justify-content will make it horizontally center

when flex-direction is row, align-items would act vertically and justify-content would act horizontally,

And vice versa if the flex-direction is column, vertical will become horizontal, therfore, align-items will make items center horizontally and justify-content would make items vertically center

You can refer this,

3

They are used in different contest but takes the same values. it’s eight you use align-item to a flex-direction or justify-content to flex-direction. When you used them together is like using

width = 100% and
width = 100% again.
1 Like