백분율 패딩이 Flexbox 레이아웃을 방해하는 이유는 무엇입니까?

백분율 패딩이 Flex 항목 동작을 방해하는 이유

Flexbox 레이아웃은 축을 따라 항목을 균등하게 배포하도록 설계되었습니다. 그러나 플렉스 항목(플렉스 컨테이너 내에 포함된 비플렉스 요소)에 백분율 패딩을 적용하면 컨테이너의 레이아웃이 중단될 수 있습니다.

이 예에는 다음을 포함하는 플렉스 컨테이너(

)가 있습니다. 여러 개의 비플렉스 항목(
• ). 개별
• 요소의 경우 컨테이너는 여러 줄로 분할됩니다.

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

  로그인 후 복사

  그러나 고정 패딩을 사용하는 경우(예: 패딩: 0 30px) 컨테이너는 한 줄로 유지됩니다.

  설명:

  백분율 패딩의 동작은 계산 프로세스로 인한 것입니다. 관련된. 패딩은 포함 블록의 너비를 기준으로 결정됩니다. 이 너비는 처음에는 알 수 없으며 콘텐츠 또는 고정 너비 값을 기준으로 계산해야 합니다.

  백분율 패딩의 경우 패딩이 적용된 후에 너비 계산이 발생합니다. 따라서 패딩을 고려하여 컨테이너의 너비가 조정되어 잘못된 계산이 발생합니다. 이로 인해 항목이 고르지 않게 분포되고 플렉스 컨테이너의 레이아웃이 깨집니다.

  위 내용은 백분율 패딩이 Flexbox 레이아웃을 방해하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!