如何在flexboxes下放置一個元素？

我試圖把頁腳放在兩個彈性盒下（右側&左側）。但我的代碼無法正常工作。我的代碼有問題嗎？如何在flexboxes下放置一個元素？

#all{ 
    position: absolute; 
    width: 55%; 
    margin: 0 auto; 
    display: flex; 
    left: 50%; 
    transform: translateX(-50%); 
} 

#left{ 
    width: 80%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 

#right{ 
    width: 20%; 
} 

footer{ 
    width: 100%; 
    display: block; 
    clear: both; 
    text-align: center; 
}

我的HTML的摘要如下;

<body> 
    <div id="header"> 
    </div> 

    <div id="all"> 
     <div id="left"> 
     </div> 

     <div id="right"> 
     </div> 
    </div> 
    <footer>some words</footer> 
</body>

來源

2017-04-12 Tak

你能否包含你的html代碼？或者，最好包含一個可用的代碼片段，jsfiddle或codepen。 – shaochuancs

我添加了HTML的摘要。 – Tak

這與柔性盒無關。 footer未顯示在2個彈性盒（#all）下，因爲#all的位置爲absolute，這使其脫離頁面流。爲了使footer顯示在#all下，您需要刪除absolute的代碼。

我已爲您的代碼示例製作了fiddle，請檢查。

有關absolute和flow頁的詳細信息，請MDN：被相對定位仍然被認爲是在文檔中的元素的正常流動

元素。相反，完全放置的元素會從流中取出，因此在放置其他元素時不會佔用空間。

來源

2017-04-12 03:51:46 shaochuancs

非常感謝！這工作正常！ – Tak

如何在flexboxes下放置一個元素？

回答

相關問題