網站布局工具的對比：Flexbox VS Susy
來自： http://www.oschina.net/translate/website-layout-tools-compared-flexbox-vs-susy
Flexbox 已經成為了最流行的建站布局工具之一。Susy 是另一個布局工具，它和 Sass 社區一起在近幾年中得到了普及。
許多和我聊過的開發者不確定哪一個工具對于為網站創建布局更好一些。他們中的一些感覺 flexbox 足夠強大去處理所有的布局問題。然而，他們不確定是否要去學習 flexbox，因為它混亂的語法。其他人則認為 Susy 更簡單，與 flexbox 相比他們更喜歡 Susy 的簡單。
一些人甚至會問把 Susy 和 flexbox 結合是不是可能的，這樣他們就可以更加容易地布局。所以，這里有兩個本文要去探索的問題：
1. 哪一個更強大，flexbox 還是 Susy？
2. 同時使用 flexbox 和 Susy 是否可能？
讓我們開始吧，看看我們是如何比較 flexbox 和 Susy 的。
</div>
我們如何比較 Flexbox 和 Susy
嚴格地說，直接比較 flexbox 和 Susy 是不可能的，因為它們是兩個完全不同的工具。拿 flexbox 與一個基于浮動的布局工具來比較可能更合適。
然而，因為 Susy 和 flexbox 都習慣構造布局，我們可以試著去構造不同的布局去作為比較的代表。在這篇文章中，我們會比較以下五個布局：
1. 內容和側邊欄布局
2. 內容和側邊欄，在比例網格中
3. 內容和側邊欄，在固定間隙網格中
4. 畫廊布局，在比例網格中
5. 畫廊布局，在固定間隙網格中
不用擔心你不確定什么是比例和固定間隙網格。當我們說到第二個布局的時候我們會講解它。
現在，讓我們開始比較第一個布局吧。
布局1：內容和側邊欄布局
我們想要在這第一個布局中保持簡單，那樣就可以讓你開始習慣于使用 flexbox 和 Susy 來創建網格。
我們在這里會創建一個類似的 Smashing Magazine 的博客類型的網站，在這樣的網站頁面上，內容占據總寬度的 75%，側邊欄占據總寬度的 25%：
博客類型的內容和側邊欄布局。 ( 查看大圖 )
下面是我們在使用 flexbox 和 Susy 時都會為這個布局編寫的 html 代碼。一個容器元素加上為每個工具準備的兩個 div。
<!-- Flexbox markup --> <div class="flexbox"> <div class="content"> <h4> Content </h4> </div> <div class="sidebar"> <h4> Sidebar </h4> </div> </div><!-- Susy markup --> <div class="susy"> <div class="content"> <h4> Content </h4> </div> <div class="sidebar"> <h4> Sidebar </h4> </div> </div></pre>
如你所見，通過使用相同的標記，我們將內容保持一致。
現在讓我們開始加樣式。
Flexbox
使用 flexbox, 首先我們需要給父容器(.flexbox) 設定 display 屬性為 flex。
注意:為了簡化代碼，我們先不管特定于瀏覽器的帶有前綴的屬性。
.flexbox { display: flex; }然后，我們將 flex-basis 添加到 .content 和 .sidebar, 它類似于 width 屬性。
.flexbox { display: flex; .content { flex-basis: 75%; } .sidebar { flex-basis: 25%; } }Susy 鏈接
Susy 附帶會在網格上有一個默認的中縫（gutter）設置。首先我們需要通過在 $susy 映射中將 gutters 設置為 0 來禁用它：
// Importing Susy @import "susy"; // Removing default gutters $susy: ( gutters: 0 );Susy 目前最常規的使用方式就是 span() 混入。這里，我們可以在 .content 和 .sidebar 的 span() 混入中使用百分比來達到類似的效果：
.susy { .content { @include span(75%); } .sidebar { @include span(25%); } }因為 Susy 默認是基于浮動的布局，我們需要強制讓父元素(.susy)將子元素進行 clear 處理，來防止 父元素壓縮 ：
@mixin clearfix { &:after { content: ' '; display: table; clear: both; } } .susy { // Adds clearfix @include clearfix; .content { @include span(75%); } .sidebar { @include span(25%); } }如你所見，在本階段 Susy 和 flexbox 的代碼都相當的類似。我們可以立馬就指出的唯一的不同之處就在于 flexbox 單純使用 CSS 就能起作用，而 Susy 需要用到 Sass 預處理器。
讓我們繼續對下一個布局進行比較。它會更加的有趣一些。
</div>
布局2：內容和側邊欄位于成比例的網格上
對于設計師和開發者而言，網格都是網頁上基礎的構建塊，所以我們會用網格來對布局進行比較。
當我們考慮為網頁構建網格時，立即會想到要讓網格響應不同的屏幕寬度。
當網格拉伸時，列和間隔應該成比例的擴張(這就是成比例的網格)嗎?
成比例的網格。 ( 查看大圖 >
或者，列在擴張的同時，間隔仍然保持固定的尺寸(間隔固定的網格)?
固定間隔的網格。 ( 查看大圖 )
考慮這個問題很重要，因為這將會影響到布局如何響應像網頁這樣的流動媒介。它也會影響到布局的代碼是如何編寫的。
首先讓我們來研究成比例網格。
在繼續之前，讓我們使用Susy來幫助我們給網格創建一個背景，那樣我們就能很容易的看到自己是否做對了。對于這里的這個示例，我們會使用12列網格，每一列的寬度將會是每一個間隔寬度的4倍。
$susy: ( columns: 12, gutters: 0.25, debug: (image: show-columns) );然后我們會使用Susy提供的show-grid()在 .flexbox 和 .susy 上都將網格展示出來。這個 show-grid() 混入只會在選擇器上創建一個背景圖片，并不會對代碼產生任何影響。
.flexbox, .susy { @include show-grid(8);}好了，讓我們繼續。對于此布局，我們嘗試讓.content占據網格中的9列，而.sidebar則占據剩下的3列。
因為我們是現在用的是成比例的網格，所以列和間隔都需要使用百分比寬度。首先我們用flexbox來創建此布局。
Flexbox 鏈接
因為我們使用的是百分比，所以需要做一些數學計算。
對于此布局，假設每個間隔是20像素寬。列是間隔寬度的4倍 — 因而就是 80 個像素寬。
那么12列布局的總寬度就會是 (12 * 80px) + (11 * 20px) = 1180px.
12列的寬度。 ( 查看大圖 )
因為 .content 占了9行，它的寬度就會是 (9 * 80px) + (8 * 20px) = 880px.
9列的寬度。 ( 查看大圖 )
最后，我們可以通過用內容的寬度除以網格的總寬度來計算出百分比寬度。 也就是 880px ÷ 1180px * 100% = 74.58%.
9列的百分比寬度。( 查看大圖 )
然后，我們可以同樣的做一些令人感到不爽的數學計算來得到 .sidebar 的寬度:
.flexbox { display: flex;.content { flex-basis: 74.5762712%; } .sidebar { flex-basis: 23.7288136%; }}</pre>
謝天謝地，因為我們可以在flex容器中將justify-content設置成space-between，所以不必再為間隔做數學計算了。這是因為剩余的空間，其寬度就是一個間隔，它將會給 .content 和 .sidebar 之間來分。
.flexbox { display: flex; justify-content: space-between;.content { flex-basis: 74.5762712%; } .sidebar { flex-basis: 23.7288136%; }}</pre>
現在讓我們來看看如何用Susy來創建相同的布局。
Susy 鏈接
用 Susy 的話, 我們會直接將列的數量插入到 span() 混入中，而它會為我們來計算出百分比寬度。這里，.content 是 span(9) ，因為內容占了9列嘛。
Susy 也會自動計算出一個間隔的寬度，并將其作為margin-right添加到span()混入中。因而，在向側邊欄添加span()的時候，我們的額外加上加上一個last關鍵詞，來告訴Susy恰當的去掉最后一個margin-right屬性。
簡單點看，創建相同布局的Susy代碼如下：
.susy { @include clearfix;.content { @include span(9); } .sidebar { @include span(3 last); }}</pre>
就是在這里，你可能會想到這樣的代碼優雅了許多，沒有令人感到不爽的數學計算。那這是否就意味著Susy比flexbox更好呢?
好吧，并不。我們之前提到過，因為他們是不同的工具，所以不能直接拿來做比較。用基于浮動的布局來同flexbox進行比較應該更恰當，這在過去我們也得進行煩人的數學計算。
這也是人們對Susy最感到困惑的地方。它不是一個框架。它是一個強大的網格計算器，構建出來是用來處理grid的數學計算的。
因為它只是一個計算器，所以我們也可以在使用flexbox時用上Susy來去掉煩人的數學計算。這塊是Susy中一個少有人知曉的特性。
這一特性就是 span() 函數。. 它是span()混入在flexbox中的用法，用來創建寬度屬性。
因此，我們也可以說 .content 的flex-basis是 span(9)，而 .sidebar 的flex-basis是 span(3) ，得到的效果是一樣的。
.flexbox { display: flex; justify-content: space-between;// Susy span function with flexbox .content { flex-basis: span(9); } .sidebar { flex-basis: span(3); }}</pre>
如你現在可以看到的， flexbox 和 Susy 并不能直接拿來作比較，因為他們是不同的工具。不過Susy可被用來在一些領域 對flexbox進行補充：網格的數學計算。
話雖如此，我們還是繼續就flexbox和Susy如何構建布局進行“比較”，這樣我們就可以看到許多人錯過了的一些具體細節。
讓我們來看看第三種布局，面對的是一個固定間隔的網格。
</div>
布局3：內容和側邊欄位于一個間隔固定網格
在繼續之前，我們先創建一個網格遮罩，那樣我們就能知道自己是否把網格放對了地方。這里我們只能通過滾動我們自己的網格來進行對比，因為Susy提供的網格并不能固定間隔。
這種網格的標記語言代碼如下：
<div class="fixed-gutter-grid"> <!-- 12 columns in total --> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>接下來，讓我們想辦法為這個網格的遮罩創建CSS。
首先，間隔必須用固定的單位，因為只有列會擴展其尺寸。根據之前的示例，我們使用20像素作為此網格間隔的寬度。
總共有11個間隔，意味著剩余的列必須占總寬度的 100% - (11 * 20px)。每列的寬度因而就是 (100% - (11 * 20px)) ÷ 12。
正常情況下我們不能混合使用百分比和像素，因此需要使用 calc() 函數來幫助我們做這個。
下面是這個網格的完整的CSS：
.fixed-gutter-grid { @include clearfix; .column { width: calc((100% - (11 * 20px)) / 12); margin-right: 20px; float: left; height: 80px; background: rgba(blue, 0.25); &:last-child { margin-right: 0; } }}因為我們把網格設置好了，所以就需繼續嘗試 .content 和 .sidebar 的樣式。我們要得到下面這樣的效果：
間隔固定網格中的內容&側邊欄布局。 ( 查看大圖 )
Flexbox 鏈接
咋一看，用flexbox創建這樣的網格應該簡單。你可能會想我們可以在.content和.sidebar之間加上20像素的外邊距，而flexbox會魔法般的平分 .content 和 .sidebar 之間的空間。
.flexbox { display: flex; justify-content: space-between;.content { flex-basis: 75%; margin-right: 20px; } .sidebar { flex-basis: 25%; }}</pre>
不幸的是，并不會那么容易。像上面那樣做你得到的效果會是下面這個樣子：
<br/使用固定間隔網格的Flexbox。 ( 查看大圖 )
你把外邊距加到.content或者.sidebar，或者在兩者之間平分外邊距，都沒關系。結果都是一樣的。
這是因為當我們考慮到間隔時， .content 和 .sidebar 就不在是精確的3:1比例關系了。要計算它們之間精確的比率關系是不可能的，因為一直在變。
不過還是有一個方法可以規避這個 flex-basis 問題。三個步驟：
給flexbox容器加上等于間隔寬度一半的負數外邊距(左和右)。
給所有flex單項都加上等于間隔寬度一半的內邊距(左和右)。
給所有的flex單項都設置 border-box 屬性。
.flexbox { / Other properties / margin-left: -10px; margin-right: -10px;> div { box-sizing: border-box; padding: 0 10px; }
.content { flex-basis: 75%; } .sidebar { flex-basis: 25%; }</pre>
因為我們使用了是內邊距，而 box-sizing 屬性被設置成了 border-box, 現在的CSS還不能讓我們看到任何視覺上的變化。
我們需要給每個flex單項的內部內容另外的一個背景顏色，來看清它是如何對齊到網格的：
h4 { background: turquoise;}這兒有一個問題。如果我們想要給flex單項添加背景顏色會怎么樣呢?
解決這個問題的一個辦法就是添加額外的標記，但那不是處理這個問題的最佳方法。
一個替代辦法就是給每個flex單項用上外邊距，而不是內邊距。當我們使用外邊距時，必須用calc()增加對flex-basis的計算，如此它就是原來的flex-basis減去整個間隔寬度的結果了。
因此，內容的flex-basis應該是 calc(75% - 20px)。其余的屬性如下：
.flexbox { / Other flexbox properties / margin-left: -10px; margin-right: -10px;> div { / Switching to margins / margin: 0 10px; }
/ flex-basis = percentage - gutters on each side / .content { flex-basis: calc(75% - 20px); } .sidebar { flex-basis: calc(25% - 20px); }}</pre>
這里有一個額外的建議：如果你不喜歡想75%或者25%這樣的數學計算，可以在Sass中使用percentage函數。
.content { flex-basis: calc(#{percentage(3/4)} - 20px); }.sidebar { flex-basis: calc(#{percentage(1/4)} - 20px); }還有一件事兒。當你試著將上面的Codepen滾動到右邊，你會看到10像素的間隔。這個間隔是我們在向.flexbox加上 margin-right: -10px 時創建的。
這是在響應式網站上面使用flexbox的一個細微差別。如果你在flex容器上不使用負數外邊距，就要確保移除這個通過在父元素上添加 overflow-x:hidden 而創建出來的額外空間。
在這里，我們的父元素是body。
body { overflow-x: hidden;}讓我們來看看Susy是如何處理這樣的情況的。
Susy 鏈接
Susy 對于這樣的網格并沒有個答案，因為它是用來計算百分比寬度的。我們能做的就是將其同基于浮動的布局進行比較，在其中我們會使用calc()進行計算。
目前，我們能了解到下面這兩件事兒：
間隔的寬度是20像素。
列的寬度是 calc(100% -(11 * 20px) ÷ 12).
從上述的計算 (布局2中), 我們了解到9列的總寬度等于 (9 x 列寬) 加上 (8 x 間隔寬), 它等于 calc((100% - (11 * 20px)) * 9 ÷ 12 + 8 * 20px)
9列。( 查看大圖 )
我們可以遵循同樣的計算方法得到 .sidebar 的寬度:
.self-made-grid { @include clearfix;.content { float: left; width: calc((100% - (11 20px)) 9 / 12 + 8 * 20px); margin-right: 20px; }
.sidebar { float: left; width: calc((100% - (11 20px)) 3 / 12 + 2 * 20px); }}</pre>
如你所見，如果我們的一遍一遍做這樣的計算，事情就會很快變得復雜。我們可以做的一件事兒就是簡化這個流程，創建出一個網格計算器混入：
$columns: 12;$gutter: 20px;@mixin custom-span($span) { float: left; width: calc((100% - (#{($columns - 1)} 20px)) #{$span} / 12 + #{($span - 1)} * 20px); margin-right: $gutter;}.self-made-grid { @include clearfix;.content { @include custom-span(9); } .sidebar { @include custom-span(3); margin-right: 0; }}</pre>
要得到我們的數學計算器并不太難，是不？
好吧，讓我們言歸正傳、
如你所見，我們需要用flexbox耍一些怪異的小手段，以讓固定間隔的網格能正常工作。一旦你拿下了這些基礎，要創建任何這種類型網格的布局都應該是簡單的。
注意，這個方法非常重要 (你會在布局4和5中知道為什么）。
</div>
布局 4: 成比例網格上的畫廊布局
除了一般了內容和側邊欄布局，我們通常發現自己會創建的其它布局就是畫廊了。
我們來嘗試做一個三乘三的畫廊。
因為我們要創建的是一個畫廊，所以標記要做一下輕微的修改。
<div class="flexbox"> <!-- 9 gallery__items --> <div class="gallery__item">item</div> <div class="gallery__item">item</div> <div class="gallery__item">item</div> <div class="gallery__item">item</div> <div class="gallery__item">item</div> <div class="gallery__item">item</div> <div class="gallery__item">item</div> <div class="gallery__item">item</div> <div class="gallery__item">item</div></div>類似的，我們也得考慮到兩種類型的網格。首先讓我們研究下怎么在一個成比例的網格上創建一個畫廊。
Flexbox 鏈接
你首先要注意的一件事兒就是現在有了超過一行的項。如果是這種情況發生的話，我們就需要給 .flexbox 的一個 flex-wrap 屬性設置 wrap，來讓flex單項會流動到下一行。
.flexbox { display: flex; flex-wrap: wrap; justify-content: space-between;}接下來，我們需要計算出 flex-basis 的值，那樣每個畫廊單項就會占據四列。我們知道從上面數學計算可以得出其值應該是 ((4 * 80px) + (3 * 20px)) ÷ 1180px * 100% = 32.20339%.
.gallery__item { flex-basis: 32.20339%;}我們也從上面了解到可以將這里的數學計算結果切換成一個Susy的span()函數：
.gallery__item { flex-basis: span(4);}現在的效果就如下所示：
當我們創建一個畫廊時，我們常常會添加一些垂直方向的外邊距，如此畫廊單項在垂直和水平方向上的外邊距就是相等的。
你心里首先會出現的想法 可能是我們可以給每個畫廊單項添加一個基于百分比的margin-top屬性。這個margin-top屬性應該等于一個間隔的寬度 。
這個寬度應該是 20 ÷ 1180 * 100% = 1.694915254%。我們也可以使用Susy的gutter()函數：
.gallery__item { flex-basis: span(4); margin-top: gutter(); }如果你去掉背景網格，就得有一個間距相等的畫廊：
… 也就是說，直到你使用Firefox查看這個布局時才會發現的問題：
margin-top 的辦法失效是由于flex單項的外邊距和內邊距的百分比是明確預計好了flex容器的尺寸的，依據就是 flexbox 的規范文檔 。
這就意味著margin-top的百分比的值只會在我們制定了flex容器的高度值時才會被計算出來。因為我們沒有這樣做，margin-top 就會等于0。
這個方法會在Firefox中失效，是因為只有Firefox實現了我們剛剛提到的規范。WebKit 和 Internet Explorer 都還沒有實現它。
這就給我們帶來了一個不幸的沖突：如果是使用flexbox來創建一個基于百分比的畫廊，那 我們想要確保垂直和水平方向上的間隔相等就是不可能的。 不過，我們還是可以做到，如果我們并不是要追求間距的完全相等，那么仍然可以對垂直間隔使用絕對單位(像px和em)。
接下來讓我們看看如何使用Susy來實現畫廊布局。
Susy 鏈接
Susy 為我們提供了一個 gallery() 混入，可以被用來創建畫廊。我們需要做的就是在gallery()混入中加上每個畫廊單項會占據的列的數量。
.susy { @include clearfix;.gallery__item { @include gallery(4); }}</pre>
因為Susy使用的是基于浮動的布局，我們仍然可以使用基于百分比的外邊距來創建一個間距相等的畫廊，沒有任何問題：
.susy { @include clearfix;.gallery__item { @include gallery(4); margin-top: gutter(); }}</pre>
如你所見，做出一個基于百分比寬度的畫廊的唯一方法就是通過一個基于浮動的布局。
不過，如果堅持使用基于浮動的布局，就不能處理高度不相等的畫廊單項：
我們需要切換到固定寬度網格來創建這樣一個畫廊，因為我們需要使用 flexbox提供的align-stretch 屬性。
因此，讓我們來看看布局5，我們會找到如何使用flexbox來創建這樣的畫廊的方法。
</div>
布局 5: 固定間隔網格上的畫廊布局
對于最后的這個布局，讓我們先掐住話頭，直接跳到使用flexbox來創建畫廊。
Flexbox 鏈接
我們可以使用跟布局3中一樣的原則 (固定間隔上的內容和側邊欄) 來創建畫廊。
我們需要再一次做下面這些事情：
想flexbox容器添加一個負的外邊距（左邊和右邊），其值等于間隔的一半。
想所有的flex單項中添加外邊距屬性，其值等于間隔的一半。
在所有的flex-basis單項上使用calc()。
在flexbox的父容器上將overflow-x設置成hidden。
body { overflow-x: hidden;}.flexbox { display: flex; flex-wrap: wrap; justify-content: space-between; margin-left: -10px; margin-right: -10px; > div { margin: 0 10px; } .gallery__item { flex-basis: calc(#{percentage(1/3)} - 20px); margin: 10px; }}這個畫廊的好處就是它能處理高度不一的單項，免除你的煩惱：
我們并不會討論用Susy實現固定間隔的布局，因為我們知道自己只是要去再次實現自己的解決方案。
對于接下來的部分，因為現在的主題是畫廊，所以讓我們來聊聊如何處理畫廊中總是會發生的兩種場景：
畫廊單項是寬度不一的。
畫廊中剩下的單項。
讓我們同時用flexbox和Susy來處理這些問題。盡管有所不同的是，我們會用使用了Susy的布局4同使用了flexbox的布局5進行比較，以展示如何來處理這些情況。
處理Flexbox中寬度不一的單項
假設我們想要讓畫廊中第一項是其它單項尺寸的兩倍。
Flexbox 鏈接
我們只要給flexbox做一些簡單的調整，增加flex-basis百分比，那樣它就是其它單項寬度的兩倍：
.gallery__item:first-child { flex-basis: calc( #{percentage(2/3)} - 20px);}Susy 鏈接
用Susy的話就不容易了，因為它使用的是獨立的技術來創建畫廊。如果你嘗試了使用flexbox時使用的方法，會得到重疊的效果(例如，增加第一項的寬度)。
網格上面的重疊項。 ( 查看大圖 )
我們要做的就是通過理解nth-child和獨立的技術是如何運作的，來創建出我們自己的畫廊。如果你感興趣的話，可以看看我的 關于CSS技術的博客 來理解獨立的技術是如何運作的。
.susy { @include clearfix; .gallery__item { float: left; width: span(4); margin-right: -100%; margin-top: gutter(); } .gallery__item:first-child { width: span(8); } .gallery__item:nth-child(3n-1) { margin-left: span( 8 wide); } .gallery__item:nth-child(3n) { clear: left; } .gallery__item:nth-child(3n+4) { margin-left: span(4 wide); }}如你所見，使用Susy來改變畫廊單項的默認尺寸并不容易。不過，如果你理解了Susy是如何運作的, 你可以將其處理間隔的方式切換到 inside 或者 split, 并且你可以通過使用span()混入來達到同樣的簡單性：
$susy: ( // Other properties gutter-position: split, );.susy { @include clearfix; .gallery__item { @include span(4); margin-top: gutter() * 2; } .gallery__item:first-child { width: span(8); }}最后，這些方法運行的效果最后都是一樣的。
接下來我們來聊聊如何處理重疊的單項。
處理重疊的單項
我們看過flexbox和Susy是如何通過讓重疊的單項懸空來處理其重疊的問題。如果重疊的單項不止一個會如何呢?
Flexbox 鏈接
用flexbox實現的效果相當不好，因為我們使用了space-between屬性。
不過，我們可以通過將每個單項的flex-grow屬性設置成1來解決這個問題：
.gallery__item { // Other properties flex-grow: 1;}但是這樣會讓第一個單項寬度變成整個容器的寬度，因此你可能會想要注意到會讓多少個單項懸空。
重疊的單項占據了整個寬度。 ( 查看大圖 )
Susy 鏈接
Susy 默認會讓所有的元素懸空到左邊，這樣多數基于浮動的布局會做的。
使用基于浮動的布局，重疊的單項會被懸空到網格的左邊。 ( 查看大圖 )
如果你不想要一堆亂糟糟的代碼，那我還是建議你不用這種方法。
不過就你的信息而言，可能創建一個使用Susy畫廊的布局跟設置 flex-grow: 1 效果是一樣的。
我不準備解釋這是如何運作的，因為它相當深入了。不過如果你感興趣想自己弄清楚的話，我們給你留下一個Codepen：
</div>
Flexbox Link 的一個重要提醒
我們只討論在flexbox上基于這篇文章管理flex-basis屬性。Flexbox提供了附加的屬性，諸如：flex-grow 和 flex-shrink，它可以讓我們做更有意思的布局，這與之前的網格是不一樣的。
這些類型的布局超出了本文的范圍，所以我強烈建議你先看看在下一節中提到的flexbox課程。
結語
以上我們已經探討了很多關于使用 flexbox 和 Susy 這兩個工具來進行網站布局的事情。
通過這些探討，你將會明白，為什么我們不能直接對比flexbox 和 Susy，因為他們本來就是兩種不同的工具。
另外，你還會懂得如何使用 Susy 和 flexbox 來構建不同的網站布局，并能解決人們使用這兩種工具時面臨的各種挑戰。
當然，這并不是flexbox 和 Susy 的全部，那還有很多的東西。
這兒我推薦一下相關的資料：
以上就是文章的全部內容。你讀完后有什么想法，歡迎在下面一起討論，如果你有什么問題，可以 聯系我 ，我將很榮幸為您解答！
(rb, ml, al)
本文由用戶 btlt4956 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！相關經驗
相關資訊
