Flex Grow, Flex Shrink 및 Flex Basis 이해

CSS flex-grow , flex-shrink 및 flex-basis 특성의 상호 작용을 깊이 이해하십시오. CSS 속성을 적용하면 많은 일이 무대 뒤에서 발생합니다. 예를 들어 다음 HTML이 있다고 가정합니다.

<div>
  <div>어린이</div>
  <div>어린이</div>
  <div>어린이</div>
</div>

그런 다음 몇 가지 CSS를 작성합니다.

 .parent {
  디스플레이 : Flex;
}

실제로, 위의 CSS 코드 라인 외에도, 우리는 다음 스타일을 스스로 작성한 것처럼 .child 요소에 일련의 속성을 암시 적으로 적용합니다.

 .어린이 {
  Flex : 0 1 Auto; /* 기본 플렉스 값*/
}

일부 속성에는 우리가 재정의 할 기본값이 있기 때문입니다. 이러한 암시 적 애플리케이션의 스타일을 이해하지 못하면 레이아웃은 매우 혼란스럽고 관리하기 어려울 수 있습니다.

flex 속성은 속기 CSS 속성으로 동시에 3 개의 독립적 인 CSS 속성을 설정합니다. 따라서 상기의 약자는 다음과 같습니다.

 .어린이 {
  Flex-Grow : 0;
  Flex-shrink : 1;
  플렉스-바이스 : 자동;
}

약어 속성은 여러 CSS 속성을 묶어 background 속성과 마찬가지로 한 번에 여러 속성을 작성하는 것이 편리합니다.

약어 특성은 혼란 스러울 수 있지만 Flexbox의 경우 flex 속성과 하위 보유 사이에 복잡한 상호 작용이 있기 때문에 약어를 사용하는 것이 좋습니다.

대부분의 경우 이러한 Flexbox 속성의 세부 사항을 알 필요가 없기 때문에 기본 스타일은 매우 유용합니다. 예를 들어, Flexbox를 사용할 때 일반적으로 다음과 같이 씁니다.

 .parent {
  디스플레이 : Flex;
  정당화 컨텐츠 : 공간 중간;
}

우리는 어린이 요소 나 그들에게 적용되는 스타일에 대해 신경 쓰지 않아도됩니다. 그러나 이것은 Flexbox의 빙산의 일각 일뿐입니다.

flex-grow , flex-shrink 및 flex-basis Properties를 포함한 Flexbox와 더 복잡한 레이아웃을 만드는 방법을 포함하여 Flexbox를 깊이 파고 들으려면 어떻게해야합니까?

단순화 된 개요부터 시작하여 자식 요소에 적용되는 기본 flex 속성으로 돌아가 봅시다.

 .어린이 {
  Flex : 0 1 Auto;
}

이 기본 스타일은 어린이 요소에게 스트레칭 및 축소 방법을 알려줍니다. 나는 보통 이러한 약어 특성을 다음과 같이 이해합니다.

 /* 내 마음 속의 위의 규칙에 대해 어떻게 생각합니까*/

.어린이 {
  Flex : [Flex-Grow] [Flex-Shrink] [Flex-Basis];
}

/* 또는... */

.어린이 {
  플렉스 : [최대] [최소] [이상적인 크기];
}

첫 번째 값 flex-grow 기본값은 0으로 기본적으로 변합니다. 즉, 요소가 대부분 확장되지 않음을 의미합니다. 요소 크기는 내용에 따라 다릅니다. 예를 들어:

 .parent {
  디스플레이 : Flex;
}

flex-grow 속성의 기본값을 0에서 1로 변경하면 :

 .어린이 {
  Flex : 1 1 Auto;
}

그러면 모든 요소가 .parent 요소의 공간을 동일하게 분배하지만 내용이 길이가 같은 경우에만 배포합니다. 이것은 다음과 같습니다.

 .어린이 {
  Flex-Grow : 1;
}

우리가 요소 중 하나가 다른 요소보다 더 성장하기를 원한다면 다음을 수행 할 수 있습니다.

 .Child-3 {
  Flex : 3 1 Auto;
}

/* 또는... */

.Child-3 {
  Flex-Grow : 3;
}

flex-shrink 는 약어의 두 번째 값입니다.

 .어린이 {
  Flex : 0 1 Auto; / * flex-shrink = 1 */
}

flex-shrink 브라우저에 요소의 최소 크기를 알려줍니다. 기본값은 1이므로 동일한 공간이 항상 점유됨을 의미합니다. 0으로 설정된 경우 :

 .어린이 {
  Flex : 0 0 Auto;
}

요소가 줄어들지 않습니다.

flex-basis 기본적으로 flex 약어에 마지막으로 추가 된 값으로 이상적인 크기를 유지하도록 요소를 지시합니다. 기본값은 auto 이므로 "내 높이 또는 너비 사용"을 의미합니다.

flex-basis 1000px로 설정하면 :

 .Child-3 {
  플렉스 : 0 1 1000px;
}

우리는 브라우저에 1000px의 공간을 차지하도록 노력합니다. 불가능한 경우 요소는 다른 요소를 기준으로 비례 적으로 공간을 차지합니다.

요소가 수축되는 것을 방지하려면 :

 .Child-3 {
  플렉스 : 0 0 1000px;
}

flex-wrap 속성을 설정하면 레이아웃이 변경됩니다.

 .parent {
  디스플레이 : Flex;
  플렉스 랩 : 랩;
}

대체로 :

• flex 의 약어를 사용하십시오.
• 약어를 사용할 때 최대, 최소 및 이상적인 크기를 기억하십시오.
• 요소 내용은 이러한 값의 작동 방식에도 영향을 미칩니다.

위 내용은 Flex Grow, Flex Shrink 및 Flex Basis 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!