기준선 대 Flex-Start 정렬

유연한 레이아웃에서 flex-start는 교차 축의 시작 부분에 항목을 정렬하고 기준선은 기준선을 정렬합니다. 콘텐츠의 기준선을 따라 정렬합니다.

기준선 정렬

As 이름에서 알 수 있듯이 기준선 정렬은 플렉스 항목의 기준선, 즉 대부분의 캐릭터가 앉아 있는 선을 고정합니다. 기준선과 교차 시작 가장자리 사이의 최대 거리를 가진 항목은 해당 가장자리와 같은 높이가 됩니다.

시각적 차이

플렉스 항목의 글꼴 크기가 균일한 경우 또는 내용이 동일하면 flex-start와 기준선이 서로 바뀌어 보일 수 있습니다. 그러나 항목 크기가 다양하면 차이가 나타납니다.

기준선 결정

행에서 가장 높은 항목이 기준선 정렬 기준을 결정합니다.

예제

다음 코드를 고려해보세요 snippet:

.flex-container {
  align-items: baseline;
  ...
}
...
.flex-item {
  font-size: 2em;
  ...
}
...
.flex-item.item2 {
  font-size: 7em;
}

글꼴 크기가 가장 큰 항목인 "B"가 행의 기준선을 결정합니다. 다른 항목은 아래 이미지에 표시된 대로 "B"의 기준선을 따라 정렬됩니다.

[기준선 정렬을 사용하여 다양한 높이에 정렬된 플렉스 항목 이미지]

중요 사항

기준 키워드는 모든 브라우저에서 지원되지 않습니다. 브라우저 간 호환성을 위해 CSS3의 수직 정렬 속성과 함께 align-items: flex-start 사용을 고려하세요.