flex 方式的佈局你用對了嗎？

linxz發表於2019-03-18
Flex

對於 CSS 中的 flex 彈性佈局，曾經我在公眾號裡寫過《一點點對 flex 佈局有關的看法》和《又一次想說 flex 佈局挖坑給你，信嗎？》，印象中最深的一個點，是我在文中提到的對於 flex 的這個屬性中的三個屬性值怎麼用的話題。如果你有興趣的話，可以點選連結再去看看，不想看的可以直接想一下：

flex: 1 1 auto;
flex: 1 0 auto;
flex: 0 0 200px;
flex: 1 0 200px;
flex: 0 0 auto;
flex: 0 0 200px;複製程式碼

反正就是這樣的一種組合形式，明白的肯定都明白，其實很簡單，就是 flex-grow、flex-shrink 以及 flex-basis 的組合。怎麼組合，怎麼用，就靠自己的理解去運用了。就目前為止，沒說當 flex-grow: 1; 時，在父元素用後不同的 width 基礎下，這個可以算出來子元素的 width 值是多少 px。個人認為這樣算出來也是沒有意義的，畢竟 flex 是彈性佈局。

在說正事 之前，我還想提一個就是很早之前，我曾經整過一個“同 HTML 結構根據不同樣式而改變佈局”的頁面。

flex 方式的佈局你用對了嗎？

這個頁面是幾年前寫的，具體多少年，我忘了，反正挺久了。記得當時業界內，大家對於《禪意花園》這本書的熱情似乎也是逐漸變淡的時間把。至於多久了，這個並不重要，關鍵是當時寫這個的時候，我用的是負邊距和浮動的一些結合吧，好像後來加了一點 transition 而已。總之呢，就是在不改變 HTML 結構的前提下，只是修改了部分 CSS 屬性來完成的。

有興趣的可以訪問這個連結地址去看看：lab.tianyizone.com/layout/

回到這次要說的主題，前面提到了 flex，也提到了同一個 HTML 結構根據樣式而改變頁面佈局；那麼現在，我們可以通過 flex 的方式更輕鬆的實現了。

<div class="pages">
  <header class="header"></header>
  <main class="main"></main>
  <aside class="side"></aside>
  <aside class="extend"></aside>
  <footer class="footer"></footer>
</div>複製程式碼

結構很簡單，假設是有一個頭一個尾，中間是主要內容和兩個側邊欄的結構。如果只想要一個側邊欄，那麼可以把另外一個刪掉或者 display: none; 都無所謂了。


通過這樣的一個簡單的結構，我們利用 flex 相關的屬性可以實現一行一列、一行兩列、一行三列的佈局方式，還可以有一列固定寬度，其他幾列自適應等各種情況。那些所謂的“聖盃佈局”、“雙飛燕佈局”也是分分鐘可以實現，甚至我們可以直接實現一行 N 列的橫向佈局。

.pages {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}複製程式碼

父級元素中我們通過 flex-wrap 和 flex-direction 來控制子元素的排列方式，如果有興趣的還可以把 display: flex; 改成 display: inline-flex; 來看看效果。

.header {
  order: 1;
  flex: 1 1 100%;
}
.main {
  order: 1;
  flex: 1 1 auto;
}
.side {
  order: 2;
  flex: 0 0 25%;
}
.extend {
  order: 3;
  flex: 0 0 200px;
}
.footer {
  order: 4;
  flex: 1 1 100%;
}複製程式碼

子元素就簡單了，只需要用到 order 和 flex 屬性就可以了。

  • 通過 order 的數值改變元素的顯示位置

  • flex 中三個屬性值控制元素是否需要彈性縮放

    • 如果不需要彈性縮放的話，再設定一個值表示這個元素所佔據的寬度是多少即可；

    • 如果需要彈性的話，也可以考慮設定元素所佔據的最大的寬度值

最終怎麼變化，完全很自由。不過要做一行多列，並且 flex-wrap: wrap; 時，要注意一行中能否容下的寬度，否則會出現換行的情況。也就是因為這樣，在這個 demo 中，頭尾兩個部分我使用了 100%，就是要讓其撐滿父元素的空間。

flex 方式的佈局你用對了嗎？

為了方便看效果，我在 demo 中加了幾個簡單的修改屬性的方式。通過 GIF 截圖可以看到，要改變佈局真的很容易，再也不用像以前那樣繁瑣的操作了，而且 HTML 結構還簡單明瞭。

很多人在用 flex 的時候，其實就是很簡單的想著所謂的彈性佈局，或者覺得直接寫了一個 flex:1; 之後就可以得到頁面效果，那麼最終是否真的完全利用好這個 flex 彈性佈局呢？

現在的瀏覽器對於 flex 的相容性是日漸完善了，幾乎很難見到不相容 flex 佈局的瀏覽器了，當然也不排除還有這樣的瀏覽器的存在。可這無所謂啊，當你選擇使用了 flex 彈性佈局的時候，肯定是瞭解過訪問你的站點，你的頁面的那些使用者，就算沒了解過，也應該是知道自己的使用者群體大概是一些怎麼樣的人，對吧。

當然，上面那個 demo 的截圖主要還是桌面端的瀏覽器的佈局方式居多，在移動端，應該不會有那麼多列的佈局方式。其實沒什麼，我只是在想這個 flex 彈性佈局應該怎麼用比較好，並不是說一定要這樣的佈局方式。畢竟 CSS 是靈活的東西，我們不能一板一眼地去運用，要根據具體情況進行具體的分析。

linxz.github.io/tianyizone/…

上面這個 URL 地址就是 demo 效果，再附上一張圖，是目前為止在 github 上自己所放的一些小東西。

flex 方式的佈局你用對了嗎？

本文主要是發在個人的微信公眾號中，有興趣的可以關注我的公眾號，不時更新發牢騷。flex 方式的佈局你用對了嗎？mp.weixin.qq.com/s/Y1oX2WHJR…


相關文章