摘要：通過加對應的調(diào)整布局。這些類實際是通過使用選擇器為當前元素增加了左側(cè)的邊距。簡單說兩種模式屬性為代表的框架自定義屬性為代表的框架我個人認為過多導致布局和樣式混在一起不好分辨，后期維護較困難，決定采用框架的設計模式。

本文作為 Flex 布局進階，不對基礎做詳細介紹，關(guān)于 Flex 基礎知識請到阮一峰老師的Flex 布局教程：語法篇

看過基礎，或者已經(jīng)使用 Flex 布局的朋友可以根據(jù)本文試著動手寫一寫，先不急著開工，看看其它大型框架怎么實現(xiàn)的。

相信大家都用過 Bootstrap 框架，目前最受歡迎的響應式布局框架，在 Github 上 10w＋ 的 star

而其中的柵格系統(tǒng)深入人心，針對不同尺寸的屏幕提供一套完整布局方案，不了解柵格系統(tǒng)的可以看中文官方文檔柵格系統(tǒng)

對于新人概念有點多，跳躍性挺強，不過跟著跳轉(zhuǎn)鏈接一步一步摸索很快就能入門，這里給的都是中文鏈接。

給出一段柵格系統(tǒng)的代碼片段

  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1


  
.col-md-8
  
.col-md-4


  
.col-md-4
  
.col-md-4
  
.col-md-4


  
.col-md-6
  
.col-md-6

效果如下

這里柵格系統(tǒng)將屏幕水平均分成 12 份。通過加對應的 class 調(diào)整布局。語法也通俗易懂不過多解釋。

再來看另一個列偏移的例子

  
.col-md-4
  
.col-md-4 .col-md-offset-4


  
.col-md-3 .col-md-offset-3
  
.col-md-3 .col-md-offset-3


  
.col-md-6 .col-md-offset-3

效果如下

使用 .col-md-offset-* 類可以將列向右側(cè)偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側(cè)的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側(cè)偏移了4個列（column）的寬度。

看到這里大家感覺這個方案很完美，既有相應布局又有布局的偏移，但我的項目需求是這樣的

這里單選按鈕和票的名稱居左，而票價居右，左右給相同的 padding 后，單選按鈕和票價分別在左右處于臨界狀態(tài)，我并不知道右側(cè)的票價占幾個柵格，也不知道左側(cè)的偏移到底給多少合適（因為票價是變量，可能 10 位數(shù)，當然可能性為 0）

了解 flex 基礎的一眼識破，不是有 space-between 嘛，對就是它，不了解的朋友繼續(xù)轉(zhuǎn)到文章開頭的鏈接溫習一下。

下文我們?nèi)フ以O計靈感

What is Angular Material?

For developers using AngularJS, Angular Material is both a UI Component framework and a reference implementation of Google"s Material Design Specification. This project provides a set of reusable, well-tested, and accessible UI components based on Material Design.

用過 AngularJS 的人應該多少有所耳聞，沒聽說的也沒關(guān)系。我們學習的是設計思想而不是研討一門框架。

這里的案例來源于：https://material.angularjs.or...

上面鏈接是 Angular Material 框架布局部分的 API 文檔，文檔下方有單選按鈕組合來呈現(xiàn)不同的布局實現(xiàn)。

先給出基本代碼

  
one
  
two
  
three

效果如下

其它屬性如下，

進入上方鏈接可以在線感受一下，所有布局效果，這里不一一截圖

同樣也支持柵格系統(tǒng)不過這里更精密一些，是 100 份的均分，官網(wǎng)例子給的特別全面，鏈接： https://material.angularjs.or...

這里給大家選出一個比較通用的例子，代碼如下

  

    [flex="30"]
  
  

    [flex="45"]
  
  

    [flex="25"]
  
  

    [flex="33"]
  
  

    [flex="66"]
  
  

    [flex="50"]
  
  

    [flex]
  

效果如下

代碼簡潔易懂，layout="row"表示在水平方向分布，最后的 flex 不帶參數(shù)表明自動填充，將不帶 flex 屬性的元素之前的空間填滿。

下面我們回到需求，針對需求給出 html 結(jié)構(gòu)的設想

  
單選按鈕和票的名稱
  
票價

或者干脆

  
單選按鈕和票的名稱
  
票價

好，有的朋友說使用 float 或者 text-align 也可以滿足需求的啊，干嘛寫這么長篇幅的文章解釋這個案例？

問的好，首先 flex 布局優(yōu)勢特別明顯，彈性布局，不存在兼容問題，也不用清除浮動。

設想一下項目復雜度再大一點呢，守舊的方案還能不能保持清晰的 html 文檔結(jié)構(gòu)？css 又該從哪里下手？

既然我們出發(fā)點是對的，接下來選擇一下設計模式。

簡單說兩種模式

class 屬性為代表的 Bootstrap 框架

自定義屬性為代表的 Angular Material 框架

我個人認為 class 過多導致布局和樣式混在一起不好分辨，后期維護較困難，決定采用 Angular Material 框架的設計模式。

首先大家要了解 css 屬性選擇器，常用的有 class選擇器，id選擇器，tag選擇器，屬性選擇器還是比較少用的。

下面給 w3school 的截圖，子串匹配屬性選擇器的語法

簡單易懂，下面直接上寫好的代碼 layout.scss

[layout] {
  display: flex;
}

[flex] {
  flex: 1;
}

[layout-wrap] {
  flex-wrap: wrap;
}

[layout="row"] {
  flex-direction: row;
}

[layout-wrap] {
  flex-wrap: wrap;
}

[layout="column"] {
  flex-direction: column;
}

[layout-align="start start"],
[layout-align="start center"],
[layout-align="start end"] {
  justify-content: flex-start;
}

[layout-align="center start"],
[layout-align="center center"],
[layout-align="center end"] {
  justify-content: center;
}

[layout-align="end start"],
[layout-align="end center"],
[layout-align="end end"] {
  justify-content: flex-end;
}

[layout-align="space-between start"],
[layout-align="space-between center"],
[layout-align="space-between end"] {
  justify-content: space-between;
}

[layout-align="space-arround start"],
[layout-align="space-arround center"],
[layout-align="space-arround end"] {
  justify-content: space-arround;
}

[layout-align="start start"],
[layout-align="center start"],
[layout-align="end start"],
[layout-align="space-between start"],
[layout-align="space-arround start"] {
  align-items: flex-start;
}

[layout-align="start center"],
[layout-align="center center"],
[layout-align="end center"],
[layout-align="space-between center"],
[layout-align="space-arround center"] {
  align-items: center;
}

[layout-align="start end"],
[layout-align="center end"],
[layout-align="end end"],
[layout-align="space-between end"],
[layout-align="space-arround end"] {
  align-items: flex-end;
}

好，到這為止我們的 flex 框架已經(jīng)實現(xiàn)了，效果語法和 Angular Material 框架是一樣的。大家自行嘗試。

細心的朋友發(fā)現(xiàn)這里 orange 并沒有實現(xiàn)柵格系統(tǒng)，因為現(xiàn)實需求中柵格系統(tǒng)布局的實用價值不是很大（各元素寬度根據(jù)內(nèi)容變化，手機端在元素寬度不變的情況可以通過相同的 rem 值針對不同屏幕適配，而 n 等分可以通過 space-arround 屬性實現(xiàn)），而且本文把開發(fā)的重點放在了 flex 的封裝上。

在現(xiàn)代復雜 css 樣式的開發(fā)中，盡量避免重復書寫相同的布局代碼，除非特殊需求（真對相應的 class 給樣式），這樣既滿足模塊化思想又保證了代碼復用，項目中只需引入 layout.scss 即可。如果你針對 css 代碼模塊化有不同的想法歡迎留言交流。

文章出自 orange 的 個人博客 http://orangexc.xyz/