這是創建等高側邊欄的最簡單方法
很長一段時間以來，我們一直被迫使用 CSS 佈局模式創建 Web 應用程序的界面，這些模式最初是為放置文檔而設計的。難怪初學者這麼痛苦！幸運的是，事情正在發生變化——我們現在有了 flexbox 佈局模式。如果你有能力忽略 IE <10 （這是一個很大的如果），你今天可以使用它！規範已經敲定，大多數瀏覽器已經支持無前綴。
在這個快速教程中，我將向您展示如何使用 flexbox 創建一些基本的東西，直到現在都非常棘手 - 一個與您的主要內容具有相同高度的側邊欄。棘手的部分在於您希望側邊欄和主頁元素都具有不同長度的內容，但同時它們應該具有相同的高度。使用彈性盒子，這很容易。這是怎麼做的。
向 Flexbox 打個招呼
有很多指南可以讓您了解 flexbox。在這裡，我們將採取更實際的方法，並直接使用它。首先，這裡是 HTML：
<section id="page">
<div id="main">
<!-- The content of the page will go here -->
</div>
<aside>
<!-- This is the sidebar -->
</aside>
</section> 我們想要製作 #main div 和旁邊 彼此相鄰顯示，並且具有相同的高度，無論它們包含什麼內容。我們還想讓頁面具有響應性，以便側邊欄具有固定寬度，但主要元素會收縮/擴展以填充可用空間。最後，在小屏幕上，我們希望側邊欄位於主要內容下方。
這是如何做到的。首先，我們將激活 flexbox：
#page {
display:flex;
} 這將打開 #page 元素放入彈性容器。它將顯示為塊級元素（它將佔據頁面的整個寬度），並將其中的所有元素都轉換為彈性項目 .這是很重要的一點——我們希望我們的主要內容和側邊欄是彈性項目，所以它們佔據了頁面的整個高度。
但我們也想讓 #page 元素最大寬度為 1200px，我們希望它居中。它仍然是一個普通的塊元素，所以我們可以這樣居中：
#page {
display:flex;
/* Centering the page */
max-width:1200px;
margin:0 auto;
} 完美的！現在我們必須為 #main 指定寬度 元素和側邊欄：
#main {
/* This makes the element grow and take all available space, not taken by the sidebar */
flex-grow:1;
}
aside {
/* Give the sidebar a default width, and prevent it from shrinking */
flex-shrink:0;
width:280px;
} 完畢！我們的佈局差不多完成了。當 #main 的內容 元素導致它變長，它會放大#page ，這反過來也會增長（反之亦然）。最後要做的就是讓側邊欄位於小屏幕上的主要內容下方，這可以通過簡單的媒體查詢來完成：
@media all and (max-width: 800px) {
#page {
flex-flow:column;
}
/* Make the sidebar take the entire width of the screen */
aside {
width:auto;
}
}
默認情況下，彈性容器有一個 flex-flow 行的值 ，它並排顯示元素。在小屏幕上，我們將其切換為垂直方向，這會將側邊欄推到主要內容下方。
為簡潔起見，我省略了一些與佈局無關的 CSS。您可以從本文頂部附近的按鈕下載整個示例。值得一提的是，我沒有為 IE 10 提供回退，它實現了稍微舊版本的 flexbox 規範，因此它僅適用於 Firefox、Chrome、Safari、Opera 和 IE 11。
有了這個，我們的側邊欄就準備好了！
結論
還有更多關於 flexbox 的知識，但我希望這篇文章能讓你快速入門。 Flexbox 絕不是創建這種佈局的唯一方法，但它是構建 Web 界面的前進方向。如果您有能力放棄對舊版 IE 的支持，則可以立即使用它。
