如何讓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填充水平和垂直空間？

回答

相關問題