display를 flex로 지정하면 플렉스 방식으로 자식 요소들을 배치하게 됩니다.
inline-flex는 해당 컨테니어 요소를 인라인으로 만든다는 차이가 있습니다.

flex-direction은 내부 요소(아이템)들을 어느 축(가로 또는 세로)을
이 값에 따라 justify-content, align-items, align-content 등의
속성들이 작용할 방향이 결정됩니다.

flex-wrap은 내부 요소의 갯수 X 길이가 컨테이너를 넘어갈 때 이들을
여러 줄에 걸쳐 나열할지 여부를 정합니다.

justify-content는 메인 축에서 아이템들을 정렬할 방식을 정합니다.
flex-start(end)는 row(column)-reverse의 영향을 받는다는 점에서
start(end)와 다릅니다. flex-가 붙은 것을 사용하세요.

align-items는 수직 축(메인 축의 반대)에서 아이템들을 정렬할 방식을
정합니다. wrap으로 아이템이 여러 줄이 되면 align-content를
사용해서 보다 다양한 방식으로 정렬할 수 있습니다.

gap 속성으로는 아이템간에 간격을 줄 수 있으며 두 개의 값을 넣어서
가로 간격과 세로 간격을 다르게 지정하는 것도 가능합니다.