Flexbox는 100% 상위 높이를 사용하지 않는 부동 Div 문제를 어떻게 해결할 수 있습니까?

Float Div를 상위 높이 100%로 설정: Flexbox 솔루션 공개

Float Div의 높이를 100%로 설정하려고 할 때 상위 높이가 너무 높기 때문에 개발자는 div 높이가 0px로 축소되는 문제에 자주 직면합니다. 이러한 문제를 해결하기 위해 Flexbox는 우아한 솔루션을 제공합니다.

비결은 다음과 같이 상위 div의 CSS를 수정하는 데 있습니다.

display: flex;

이 속성을 설정하면 Flexbox가 다음에서 활성화됩니다. 상위 요소는 하위 항목의 유연한 레이아웃을 허용합니다. 부동 div를 상위 요소의 100% 높이로 만드는 특정 사용 사례의 경우 브라우저 간 호환성을 보장하기 위해 공급업체 접두사를 포함하는 것이 중요합니다. 접두사 통합에 대한 지침은 css-tricks.com과 같은 리소스를 참조하세요.

추가 고려 사항:

1. Internet Explorer 지원: 가치가 있습니다. 9 이전의 Internet Explorer 버전은 Flexbox를 지원하지 않습니다. 브라우저 지원 정보는 caniuse.com을 참조하세요.
2. 항목 정렬: 기본적으로 flexbox는 하위 요소를 수직으로 정렬합니다(또는 flex-direction이 설정된 경우 수평으로). 그러나 부동 div에 대해 다른 수직 정렬을 선호하는 경우 align-self 속성을 활용할 수 있습니다.
3. 실시간 데모: jsFiddle에서 이 솔루션의 라이브 데모를 살펴보세요: https: //jsfiddle.net/bv71tms5/2/

위 내용은 Flexbox는 100% 상위 높이를 사용하지 않는 부동 Div 문제를 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!