Flexbox `align-items`: `flex-start`와 `baseline` – 언제 어느 것을 사용해야 합니까?

flex-start와 기준선의 차이점 이해

flex -align 속성을 ​​활용하는 경우 flex-start와 기준선의 차이점이 이해되지 않을 수 있습니다. 즉각적으로 드러납니다. 이는 일관된 글꼴 크기 또는 동등한 콘텐츠와 관련된 많은 상황에서 두 값 모두 동일한 정렬을 생성하는 것으로 나타나기 때문입니다. 그러나 다양한 콘텐츠 크기를 처리할 때 분명하게 드러나는 중요한 차이점이 있습니다.

flex-start 정렬

flex-start 값은 flex 항목을 교차 축의 시작 가장자리에 정렬합니다. 플렉스 컨테이너. 이 정렬은 일반적으로 가로 레이아웃에서는 Flex 항목의 왼쪽 가장자리를 정렬하고 세로 레이아웃에서는 위쪽 가장자리를 정렬합니다.

기준선 정렬

반대로 기준 값은 콘텐츠의 기준선에 따라 Flex 항목을 정렬합니다. 기준선은 대부분의 문자와 문자가 놓이는 선을 나타내며 그 아래로 디센더가 확장됩니다. Flex 항목은 기준선이 정렬되도록 배치되며 기준선과 교차 시작 여백 가장자리 사이의 거리가 가장 긴 항목이 교차 시작 가장자리와 같은 높이에 배치됩니다.

응용 프로그램의 차이점

flex-start와 기준선 정렬 중 선택은 의도한 효과에 따라 다릅니다. Flex-start는 요소를 일정한 크기로 정렬할 때 적합합니다. 반면 기준선 정렬은 모든 항목에서 기준선이 동일하도록 보장하므로 다양한 글꼴 크기가 있는 요소를 처리할 때 특히 유용합니다.

예시 데모

다음 코드 조각을 고려하세요. :

.flex-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  height: 300px;
  background-color: yellow;
}
.flex-item {
  background-color: green;
  width: 110px;
  min-height: 100px;
  margin: 10px;
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
}
.item1 {
  font-size: 2em;
}
.item2 {
  font-size: 7em;
}
.item3 {
  font-size: 0.5em;
}
.item4 {
  font-size: 3em;
}
.item5 {
  font-size: 10em;
}

기준선 정렬을 적용하면 Flex 항목이 해당 기준선을 따라 정렬됩니다. 사양에 따라 가장 높은 항목(항목 5)이 정렬에 어떤 영향을 미치는지 확인하세요. 점선은 Flex 항목 전체의 기준선을 나타냅니다.

위 내용은 Flexbox `align-items`: `flex-start`와 `baseline` – 언제 어느 것을 사용해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!