수평 정렬justify-content,align-items를 수직으로 정렬하는 속성이 아닙니다

배경.

display를 flex로 만든 flex 용기 안의 flex 항목을 수평과 수직으로 맞추는 방법으로 다음과 같은 해설을 자주 볼 수 있다

justify-content は水平方向に要素を揃えるプロパティである
align-items は垂直方向に要素を揃えるプロパティである

다른 한편, MDN의 해당 페이지를 보면 설명이 전혀 다르기 때문에 앞으로 CSS를 공부하는 사람들이 오해가 있는 지식을 최대한 익히지 않도록 하고 싶다.

해설

이런 내용은 MDN 보도에 따라 상세한 해설이 있고, 더 자세한 내용을 알고 싶은 분들은 읽어보시는 것을 추천합니다.
아래 참고 자료에 링크되어 있으니 확인해 주세요.

그럼justify-conntent와align-items는 무엇일까요?

결론적으로justify-contentent는 주축 방향에서 flex 프로젝트를 정렬하고align-items는 교차축 방향에서 flex 프로젝트를 정렬한다.

주축교차축

주 축(Main Axis)은 flex-Drection 속성에 의해 설정된 방향입니다.
flex-direction 속성은row와column 등치를 설정할 수 있습니다.
다른 한편, 크로스 축(Cross Axis)은 주 축과 교차하는 축입니다.flex-direction에서row를 설정할 때 교차축은 이른바 Y축과 방향이 같다.

왜justify-content는 수평방향, align-items는 수직방향이라고 말합니까

위에서 말한 바와 같이justify-content와align-items는flex-drection의 값에 의존한다.이 flex-direction은 기본값으로 row로 설정되어 있으며 flex-direction이 존재하는 것을 모르는 사람들이 보기에justify-content는 수평 방향이 일치하는 속성이다.
그러면 마지막으로 간단한 코드를 써서 Align-items가 수평으로 정렬된 속성임을 나타낸다.

<div class="d-flex">
    <div class="box box-red">box-red</div>
    <div class="box box-blue">box-blue</div>
    <div class="box box-green">box-green</div>
</div>

.d-flex {
    display: flex;
    flex-direction: column;
    /* align-items が水平方向に要素を配置している */
    align-items: flex-end;
}

.box {
    width: 200px;
    height: 200px;
    color: white;
}

.box-red {
    background-color: red;
}

.box-blue {
    background-color: blue;
}

.box-green {
    background-color: green;
}

참고 자료

justify-content
align-items
Main Axis(주 축)
크로스 축