CSS를 사용하여 요소가 컨테이너를 채우는 방법은 무엇입니까?

Question

Flexbox 자체가 아닌 Flexbox 항목을 여백 요소로 채우려면 어떻게 해야 합니까?

요소(여백이 있는 중첩 요소라도)는 Flexbox 프로젝트 내부가 아닌 경우 position:absolute를 사용하여 컨테이너를 쉽게 채울 수 있습니다. Flexbox 프로젝트 내부의 요소에 대해 이것이 작동하지 않는 이유는 무엇입니까?

으아아아

이 질문과 이 질문은 실제로 Flexbox 내부 항목이나 여백이 있는 항목에 대해 작동하지 않는 유사한 질문이 많이 있습니다. align-self:stretch、height:100% 和 box-sizing:border-box 在本例中不起作用，因为嵌套的 margin 또는 Flexbox 자체가 중첩되지 않는다는 사실과 같은 특별한 경우 솔루션이 많이 있습니다. 일회성 해커들의 문제가 계속해서 나타나고 있습니다...

그럼 Flexbox 프로젝트를 채우는 일반적인 방법은 무엇인가요? position:absolute 여기서 문제가 무엇인가요? 요소가 컨테이너를 채우는 가장 일반적인 방법은 무엇입니까?

Answer 1

다음에 탐구해 볼 가치가 있다고 생각되는 몇 가지 아이디어가 있나요? 그럴게요 nav 作为 main 的兄弟而不是孩子。这对于 CSS 来说不是必需的，但结构最有意义。理想情况下，您有 header、nav``main、footer，也可能有 aside. 당신은 정말로 모든 절대 위치 지정을 피하고 싶습니다. 모바일에서는 잘 재생되지 않습니다. 페이지에 텍스트 상자나 텍스트 영역을 배치하고 모바일 사용자가 이를 클릭하면 소프트 키보드가 팝업되는 경우 어떤 일이 일어날지 상상해 보세요.

으아아아 으아아아

Answer 2

으아아아