Flex 항목 자식의 백분율 패딩이 상위 Flex 컨테이너를 손상시키는 이유는 무엇입니까?

백분율 패딩이 플렉스 항목을 손상시키는 이유

요소는 플렉스 아이템으로 스타일이 지정되었습니다. 이
여러 개의
• 플렉스 아이템이 아닌 요소.
• 요소,
  요소가 여러 줄로 나누어집니다. 그러나 고정 패딩(예: 30px)을 사용하는 경우
  한 줄에 남아 있습니다.

  이 동작을 이해하기 위해 백분율 패딩과 관련된 계산을 자세히 살펴보겠습니다. 백분율 패딩 값은 포함 블록의 너비를 기준으로 합니다. 그러나 포함 블록의 너비는 내용에 따라 결정됩니다.

  이 경우

  • 의 내용을 기반으로 계산됩니다. 강요. 이 너비를 얻으려면 다음 코드를 사용합니다.

    console.log(document.querySelector('ul').offsetWidth);

    폭을 계산하기 전에 패딩 값 백분율을 결정할 수 없다는 사실이 복잡합니다. 따라서 먼저 내용을 기준으로 너비를 계산합니다.

    따라서 백분율 패딩을 사용하면 브라우저가 포함 블록의 너비를 결정하는 데 어려움을 겪게 되어 여러 줄 동작이 발생합니다. 대조적으로, 고정 패딩의 경우 너비가 명시적으로 정의되어 이 문제가 제거됩니다.

위 내용은 Flex 항목 자식의 백분율 패딩이 상위 Flex 컨테이너를 손상시키는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!