Flexbox의 Flex-Start와 기준선 정렬

CSS Flexbox의 align-self 속성을 사용할 때 flex-start 간의 차이점 이해 그리고 기준선이 중요합니다. 처음에는 동일한 결과를 생성하는 것처럼 보일 수 있지만 특정 시나리오에서는 서로 다른 동작을 나타냅니다.

Flex-Start Alignment

flex-start는 플렉스 항목을 처음에 정렬합니다. 플렉스 컨테이너의 교차축 가장자리. 이는 일반적으로 가로 방향의 경우 상단이고 세로 방향의 경우 왼쪽입니다.

기준선 정렬

기준선은 콘텐츠의 기준선을 따라 플렉스 항목을 정렬합니다. 기준선은 대부분의 문자가 놓이고 그 아래에 디센더가 확장되는 보이지 않는 선입니다.

차이점

Flex 항목의 글꼴 크기와 내용이 일관된 경우, flex-start와 기준선은 비슷한 결과를 생성합니다. 그러나 이러한 요소가 다양하면 기준선 정렬이 더 명확해집니다.

기준선 정렬을 사용하는 경우 행에서 가장 높은 항목이 기준선 위치를 결정합니다. Flex 항목은 기준선이 정렬되도록 정렬되며 시작 여백 가장자리에서 가장 먼 항목은 해당 가장자리와 같은 높이에 배치됩니다.

예

다음 코드를 고려하세요. :

.flex-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.flex-item {
  background-color: green;
  width: 110px;
  min-height: 100px;
  padding: 5px;
  text-align: center;
}

이 코드를 사용하면 Flex 항목이 기준선을 사용하여 정렬됩니다. 다음 출력이 생성됩니다:

  
A
  
B
  
C
  
D
  
E

플렉스 항목의 콘텐츠 크기는 다양하지만 모두 기준선을 따라 정렬됩니다.