二、flex 仿 gitCode 布局及自適應

首先查看我們的頁面：
在這里插入圖片描述
這個時候直接頂部一個塊，下面分為左中右三個塊，然后就解決了，是不是很簡單？相比剛剛那么這個簡單多了。那就來做吧。

2.1 基本布局

首先給一個 style 價格 flex，一樣的開頭：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>gitcode flex demo</title><style>.flex{display: flex;}</style>
</head>
<body></body>
</html>

接著給予 body flex 樣式，并且由于當前 flex 是豎著的，那么給予一個 cloumn 樣式確定方向還有對應的背景色、邊距等，這些都不存在什么疑問吧？學過上一小節的都看得懂吧，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>gitcode flex demo</title><style>* {margin: 0;}body {height: 100vh;}div {background-color: white;margin: 4px}.flex{display: flex;}.column{flex-direction: column;}.bgcolor {background-color: rgb(230, 230, 230);}</style>
</head>
<body class="flex column bgcolor"></body>
</html>

那么接下來咱們就在 body 里面新建兩個 div：

<body class="flex column bgcolor"><!--頭--><div style="height: 60px;"></div><!--內容--><div style="flex:1"></div>
</body>

此時頁面效果如下：
在這里插入圖片描述
一點問題沒有，那么接下來在內容的div 里新建 3 個 div 分別是左中右：

<body class="flex column bgcolor"><!--頭--><div style="height: 60px;"></div><!--內容--><div style="flex:1"><!--左--><div></div><!--中--><div></div><!--右--><div></div></div>
</body>

一看這 3 個 div 不用占滿行，那么肯定，給予這個內容 div 一個 flex ，并且給予內部元素不大于 1 的比例即可，還有一定要給予灰色背景，不然全白了看不見：

<!--內容-->
<div class="flex bgcolor" style="flex:1"><!--左--><div style="flex:0.2"></div><!--中--><div style="flex:0.4"></div><!--右--><div style="flex:0.2"></div>
</div>

那么既然不占滿行，那么肯定需要對應的居中，給予居中樣式：

<style>
.center {justify-content: center;
}
</style>

調用后頁面如下：
在這里插入圖片描述

2.2 左側元素內部排列

接著左側一看就是豎著的：
在這里插入圖片描述
那么給予一個樣式 column 以及 flex：

<!--左-->
<div style="flex:0.2" class="column"></div>

接著往內部添加 3 個 div 以及對應高度，若想看見這 3 個 div，你還需要給予這個左的 div 背景色：

<!--左-->
<div style="flex:0.2" class="column flex bgcolor"><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div>
</div>

效果如下：
在這里插入圖片描述

2.3 右側元素內部排列

右側也一樣，直接給予多個 div 并且設置對應的 flex 樣式即可：

<!--右-->
<div style="flex:0.2" class="column flex bgcolor"><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div>
</div>

效果如下：

在這里插入圖片描述
那么中間有點特殊，因為內容很多，那么這個時候我們填充內容會使頂部的內容發生擠壓，那么需要一個 flex-shrink: 0; 使其內容不壓縮，我們直接給予頭部這個屬性即可：

<!--頭-->
<div style="height: 60px;flex-shrink: 0;"></div>

接著給予中部巨多 div 內容，并且設置對應的高度：

<!--中-->
<div style="flex:0.4" class="column flex bgcolor"><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div>
</div>

div過多超出頁面后我們可以滾動查看底部 div：
在這里插入圖片描述
但是在原本的 gitcode 頁面中頂部是一直都存在的，不會拖動內容后頂部欄就消失，那么怎么做呢？

我們直接給予內容的 div 一個屬性 overflow 即可：

<!--內容-->
<div class="flex bgcolor center" style="flex:1;overflow: auto;">

overflow auto 會給予超出內容一個滾動條，此時滑動再多，當前頁面的頭部也將會一直顯示：
在這里插入圖片描述
此部分完整代碼如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>gitcode flex demo</title><style>* {margin: 0;}body {height: 100vh;}div {background-color: white;margin: 4px}.flex {display: flex;}.column {flex-direction: column;}.bgcolor {background-color: rgb(230, 230, 230);}.center {justify-content: center;}</style>
</head><body class="flex column bgcolor"><!--頭--><div style="height: 60px;flex-shrink: 0;"></div><!--內容--><div class="flex bgcolor center" style="flex:1;overflow: auto;"><!--左--><div style="flex:0.2" class="column flex bgcolor"><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div></div><!--中--><div style="flex:0.4;" class="column flex bgcolor"><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div></div><!--右--><div style="flex:0.2" class="column flex bgcolor"><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div></div></div>
</body></html>

2.4 自適應

有時候內容不復雜時，咱們使用自適應將會很方便，當設備是手機訪問時，屏幕大小將會改變，原有 PC
頁面顯示有問題，那么只需要使用 media 即可解決，此時我們先創建一個空的類樣式：.

<style>
.content{}
</style>

接著，給這個 content 樣式給予到內容樣式之中：

<!--內容-->
<div class="content flex bgcolor center" style="flex:1;overflow: auto;">

隨后使用 media：

<style>
@media ( max-width:600px) {.content {flex-direction: column;}
}
</style>

media 表示當 max-width:600px 當前屏幕最大寬度為 600px 時，那么就是移動端設備，直接給予 content 屬性為 flex-direction: column;，那么內容就會垂直顯示，那么就不會并排，那么就很好的適配了手機：在這里插入圖片描述
大家可以拿代碼去試試，自己拖動自己的屏幕可以看得到這個效果，完整代碼如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>gitcode flex demo</title><style>* {margin: 0;}body {height: 100vh;}div {background-color: white;margin: 4px}.flex {display: flex;}.column {flex-direction: column;}.bgcolor {background-color: rgb(230, 230, 230);}.center {justify-content: center;}.content {}@media ( max-width:600px) {.content {flex-direction: column;}}</style>
</head><body class="flex column bgcolor"><!--頭--><div style="height: 60px;flex-shrink: 0;"></div><!--內容--><div class="content flex bgcolor center" style="flex:1;overflow: auto;"><!--左--><div style="flex:0.2" class="column flex bgcolor"><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div></div><!--中--><div style="flex:0.4;" class="column flex bgcolor"><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div><div style="height: 150px;flex-shrink: 0;"></div></div><!--右--><div style="flex:0.2" class="column flex bgcolor"><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div><div style="height: 150px;"></div></div></div>
</body></html>