4. flex實戰項目音樂播放器

1.你可以讓整個包含體作為Flex容器（下圖中被包含在紅色邊框內的部分），并把布局的其它部分分成Flex項目（Item 1 和 Item 2）

注：你知道Flex項目也可以成為Flex容器嗎？是的，是可能的！你想嵌套多深就嵌套多深（不過理智的做法是保持一個合理的水平）

Item 1（第一個Flex項目）也可以弄成一個Flex容器。然后，側邊欄（Item 1b）和主欄目（Item 1a）就成了 Item 1 的Flex項目

看看上面的主欄目（Item 1a）。它也可以變成一個Flex容器，以容納如下高亮度的部分：Item 1a?—?A 和 Item 1a?—?B

2.內容和底欄的HTML&CSS

讓腳注吸附在底部。讓放音樂控制的腳注吸附在頁面的底部，同時讓主欄目填滿剩余空間。。。要怎么實現？？

這里設置為auto是讓其根據內容決定高度，flow-grow讓主欄目充滿整個空間，將flex-shrink設置為0是因為在有些瀏覽器中會有一個 bug，允許Flex項目收縮后比其內容尺寸小。這是個很古怪的行為，解決辦法就是將flex-shrink 的屬性值設置為 0，而不是默認值 1，同時，把 flex-basis 屬性設置為 auto

這樣一來因為是相對flex，所以其寬高度根據其內容決定

3.側邊欄HTML&CSS:

正如之前解釋過的，上面的 main 部分也會成為一個Flex容器。側邊欄（用 aside 標記表示） 以及 section 會成為Flex項目

現在，主欄目是一個Flex容器了。下面我們來處理它的Flex項目之一，側邊欄。跟讓腳注吸附到頁面底部一樣，你還會想讓側邊欄吸附到頁面的左邊

5. 關于響應式的設計

我們現在想設計一個flex的導航欄

如果你想在移動設備上垂直堆放，那就需要請媒體查詢等登堂入室了

注:現在就可以把Flex納入你的知識庫了，再結合媒體查詢那就更加完美了，學習就是一個這樣將新學到的東西不斷和原來的東西進行一個結合，從而擴充自己知識庫的一個過程

總結

以上是生活随笔為你收集整理的CSS之flex需要知道的一切(二)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。