flexbox가 수평 및 수직 공간을 채우는 방법?

나는 새로운 인 flexbox을 사용하여이 HTML이 : 그것은 수평 미세 확장flexbox가 수평 및 수직 공간을 채우는 방법?

<html> 
<head> 
    <style> 
     body { 
      margin: 0 
     } 

     div#outer-container { 
      height: 100%; 
     } 

     div#inner-container { 
      display: flex; 
      height: 100%; 
      flex-direction: row; 
     } 

     div #left {flex: 1; background-color: yellow;} 
     div #center {flex: 5; background-color: #fdd;} 
     div #right {flex: 1; background-color: pink;} 
    </style> 
</head> 
<body> 

    <div id="outer-container"> 
     <div>HEADER</div> 
     <div id="inner-container"> 
      <div id="left"></div> 
      <div id="center"></div> 
      <div id="right"></div> 
     </div> 
     <div>FOOTER</div> 
    </div> 
</body> 
</html>

을하지만, 수직으로 인해 머리글/바닥 글 div를 100 % 이상 높이 간다. 어떻게 그런 일이 일어나지 않겠습니까?

출처

2014-02-25 Richard

밝혀 졌 듯이 높이를 80 %로 설정하고 머리말/꼬리말 높이를 5 %로 만듭니다.

출처

2014-02-25 18:04:40 Richard

또는 표시 할 외부 컨테이너를 설정할 수 있습니다. flex : 내부에 수평 플렉스 박스 컨테이너가있는 수직 플랙스 박스 컨테이너를 가져옵니다. 그러면 바닥 글과 머리글이 고정 된 높이보다 더 동적으로 축소 및 축소 될 수 있습니다.

Chrome에서 테스트되었습니다.

<head> 
    <style> 
     body { 
      margin: 0 
     } 

     div#outer-container { 
      height: 100%; 
      display: flex; 
      flex-direction: column; 
      justify-content: space-between; 
      align-items: ; 
     } 

     div#inner-container { 
      display: flex; 
      flex-direction: row; 

      flex-grow: 2; 
     } 

     div #left {flex: 1; background-color: yellow;} 
     div #center {flex: 5; background-color: #fdd;} 
     div #right {flex: 1; background-color: pink;} 
    </style> 
</head> 
<body> 

    <div id="outer-container"> 
     <div>HEADER</div> 
     <div id="inner-container"> 
      <div id="left">tet</div> 
      <div id="center">tet</div> 
      <div id="right">test</div> 
     </div> 
     <div>FOOTEfeawR</div> 
    </div> 
</body> 
</html>

출처

2014-07-28 10:54:43 Karl

flexbox가 수평 및 수직 공간을 채우는 방법?

답변

관련 문제