Flexbox 정렬: `flex-start`와 `baseline`의 차이점은 무엇입니까?

Flexbox의 Flex-Start와 기준선 정렬

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

Flex-Start 정렬

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 항목이 기준선을 사용하여 정렬됩니다. 다음 출력이 생성됩니다.

<div class="flex-container">
  <div class="flex-item">A</div>
  <div class="flex-item">B</div>
  <div class="flex-item">C</div>
  <div class="flex-item">D</div>
  <div class="flex-item">E</div>
</div>

플렉스 항목의 내용은 크기가 다양하더라도 모두 기준선을 따라 정렬됩니다.

위 내용은 Flexbox 정렬: `flex-start`와 `baseline`의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!