1. align-items
플렉스박스 컨테이너 안에서 교차축에 따라 플렉스아이템이 정렬된다.
align-self와 다른점은?
align-self는 플렉스박스 컨테이너 안에서 개별 아이템만 교차축으로 정렬된다. 즉 특정 아이템의 정렬을 따로 하고 싶다면 이 속성을 사용하면 된다.
align-items 속성
flex-start
플렉스 아이템은 교차축 시작점에서 정렬된다.
기본적으로 가로축은 수직을 의미하며, 플렉스아이템이 상단에서 수직으로 정렬된다.
flex-end
플렉스 아이템은 교차축 끝점에서 정렬된다.
기본적으로 가로축은 수직을 의미하며, 플렉스아이템이 하단에서 수직으로 정렬된다.
center
플렉스 아이템은 교차축 중앙으로 정렬된다.
baseline
플렉스 아이템은 교차 축의 기준선에 정렬이 된다.
텍스트의 기준선이 수평선을 따라 아이템이 정렬된다.
*baseline이란??
stretch
align-items에 기본값이다. 플렉스컨테이너의 높이만큼 플렉스 아이템의 높이가 동일하게 늘어난다.
flex-start / start / self-start
items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules.
<번역> 가로축의 시작 부분에 배치됩니다. 이들 사이의 차이는 미묘하며, 플렉스 방향 규칙이나 쓰기 모드 규칙을 존중하는 것에 관한 것이다.
참고:https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties
flex-end / end / self-end
items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.
<번역>flex-end / end / self-end : 항목은 가로축의 끝에 배치됩니다. 또 다른 점은 유연 방향 규칙과 쓰기 모드 규칙을 존중하는 것에 대한 미묘한 차이입니다.
baseline, first baseline, last baseline
first baseline
첫 번째 기준선 정렬에 대한 참여를 지정합니다. 상자의 첫 번째 기준선 집합의 선형 기준선을 해당 기준선 공유 그룹의 해당 기준선과 정렬합니다.
last baseline
마지막 기준선 정렬에 대한 참여를 지정합니다. 상자의 마지막 기준선 집합의 선형 기준선을 기준선 공유 그룹의 해당 기준선과 정렬합니다.̣
https://www.w3.org/TR/css-align-3/#first-baseline-alignment
https://www.geeksforgeeks.org/how-to-align-item-baseline-of-the-container/
safe, unsafe
The safe and unsafe modifier keywords can be used in conjunction with all the rest of these keywords (although note browser support), and deal with helping you prevent aligning elements such that the content becomes inaccessible.
<번역>safe 및 unsafe 수정자 키워드는 나머지 모든 키워드(노트 브라우저 지원)와 함께 사용할 수 있으며, 콘텐츠에 액세스할 수 없도록 요소를 정렬하지 못하도록 하는 데 도움이 됩니다.
참고:https://www.stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/
