백분율 패딩을 사용할 때 Flex 항목이 래핑되는 이유는 무엇입니까?

백분율 패딩이 적용될 때 Flex 항목이 분할되는 이유는 무엇입니까?

플렉스 아이템인 요소는 여러 개의 비 플렉스
• 강요.
• 요소,
  컨테이너는 여러 줄로 분할됩니다. 그러나 고정 패딩을 사용하는 경우에는 그렇지 않습니다.

  설명

  퍼센트 패딩을 사용하는 경우 컨테이닝 블록의 너비를 기준으로 하며, 이 경우 < ul>. 문제는 컨테이너의 너비가 결정되기 전에는 패딩 비율을 해결할 수 없다는 사실에서 발생합니다.

  고정 패딩이 없으면 브라우저는 내용을 기반으로

  의 너비를 계산합니다. 그런 다음 백분율 패딩이 적용되어 더 이상

  • Beispiel

    이 동작을 더 잘 설명하려면 다음 코드를 고려하세요.

    li {
      display: inline-block;
      padding: 0 5%; /* Percentage padding */
      border: 1px solid black;
    }
    
    header {
      display: flex;
    }
    
    ul {
      border:1px solid red;
    }

    콘솔에서 다음 JavaScript를 실행하면

    의 너비를 볼 수 있습니다. 패딩이 적용된 후:

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

    이렇게 하면

    백분율 패딩을 적용한 후.

    위 내용은 백분율 패딩을 사용할 때 Flex 항목이 래핑되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!