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

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

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

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

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

對于新人概念有點(diǎn)多，跳躍性挺強(qiá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 份。通過加對應(yīng)的 class 調(diào)整布局。語法也通俗易懂不過多解釋。

再來看另一個(gè)列偏移的例子

  
.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è)偏移。這些類實(shí)際是通過使用 * 選擇器為當(dāng)前元素增加了左側(cè)的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側(cè)偏移了4個(gè)列（column）的寬度。

看到這里大家感覺這個(gè)方案很完美，既有相應(yīng)布局又有布局的偏移，但我的項(xiàng)目需求是這樣的

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

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

下文我們?nèi)フ以O(shè)計(jì)靈感

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 的人應(yīng)該多少有所耳聞，沒聽說的也沒關(guān)系。我們學(xué)習(xí)的是設(shè)計(jì)思想而不是研討一門框架。

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

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

先給出基本代碼

  
one
  
two
  
three

效果如下

其它屬性如下，

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

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

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

  

    [flex="30"]
  
  

    [flex="45"]
  
  

    [flex="25"]
  
  

    [flex="33"]
  
  

    [flex="66"]
  
  

    [flex="50"]
  
  

    [flex]
  

效果如下

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

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

  
單選按鈕和票的名稱
  
票價(jià)

或者干脆

  
單選按鈕和票的名稱
  
票價(jià)

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

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

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

既然我們出發(fā)點(diǎn)是對的，接下來選擇一下設(shè)計(jì)模式。

簡單說兩種模式

class 屬性為代表的 Bootstrap 框架

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

我個(gè)人認(rèn)為 class 過多導(dǎo)致布局和樣式混在一起不好分辨，后期維護(hù)較困難，決定采用 Angular Material 框架的設(shè)計(jì)模式。

首先大家要了解 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)實(shí)現(xiàn)了，效果語法和 Angular Material 框架是一樣的。大家自行嘗試。

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

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

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