Flex佈局應用

CSS3爲咱們提供了一種可伸縮的靈活的web頁面佈局方式-flexbox佈局，它具備很強大的功能，能夠很輕鬆實現不少複雜佈局。然而Flex屬性較多，不便於記憶，而在項目中，佈局使用頻繁，那麼能夠將flex抽離爲一個佈局工具類，簡化使用方式，快速應用於項目，減小記憶成本。

Flex介紹

Flex佈局，能夠簡便、完整、響應式地實現各類頁面佈局。目前，它已經獲得了全部瀏覽器的支持。 Flex是 Flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。

基本概念

採用Flex佈局的元素爲，稱爲 Flex容器，容器的直接子元素稱爲 Flex項目，容器默認有兩個軸心線，用於項目的對齊與排列，水平主軸爲 main axis，垂直主軸爲 cross axis，主軸的開始位置爲 start， 結束位置爲 end。

主軸和交叉軸的斷定：若是flex-direction爲row，則主軸是水平方向，若是是column，則主軸是垂直方向

CSS屬性說明

將任意元素的 display 屬性設置爲 flex，可將其轉換爲Flex容器 設爲Flex容器後，子元素的 float、clear 和 vertical-align 屬性將失效

Flex容器屬性

主軸方向：水平排列（默認） | 水平反向排列 | 垂直排列 | 垂直反向排列
flex-direction: row | row-reverse | column | column-reverse;

換行：不換行（默認） | 換行 | 反向換行(第一行在最後面)
flex-wrap: nowrap | wrap | wrap-reverse;

flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap
flex-flow: <flex-direction> || <flex-wrap>;

主軸對齊方式：起點對齊（默認） | 終點對齊 | 居中對齊 | 兩端對齊 | 分散對齊
justify-content: flex-start | flex-end | center | space-between | space-around;

交叉軸對齊方式：拉伸對齊（默認） | 起點對齊 | 終點對齊 | 居中對齊 | 第一行文字的基線對齊
align-items: stretch | flex-start | flex-end | center | baseline;

多根軸線對齊方式：拉伸對齊（默認） | 起點對齊 | 終點對齊 | 居中對齊 | 兩端對齊 | 分散對齊
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
複製代碼

Flex項目屬性

順序：數值越小越靠前，默認爲0
order: <number>; 

放大比例：默認爲0，若是有剩餘空間也不放大，值爲1則放大，2是1的雙倍大小，以此類推
flex-grow: <number>; 

縮小比例：默認爲1，若是空間不足則會縮小，值爲0不縮小
flex-shrink: <number>;

項目自身大小：默認auto，爲原來的大小，可設置固定值 50px/50%
flex-basis: <length> | auto;

flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto
兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)
flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

項目自身對齊：繼承父元素（默認） | 起點對齊 | 終點對齊 | 居中對齊 | 基線對齊 | 拉伸對齊
align-self: auto | flex-start | flex-end | center | baseline | stretch;
複製代碼

flex.css的使用

使用data屬性來設置css樣式，便於兼容現有的項目，避免樣式重名。

Flex容器配置項

標籤屬性使用方式: data-flex="xxx xxx xxx"

配置項

排列形式: row | column
間距: gutter
內容水平垂直居中: center
可換行: wrap
主軸對齊方式: main-start | main-center | main-end | main-between | main-around
交叉軸對齊方式: cross-start | cross-center | cross-end | cross-baseline | cross-stretch
多軸對齊方式: start | end | center | between | around | stretch
響應式: full
複製代碼

Flex項目的配置項

標籤屬性使用方式: data-cell="xxx xxx xxx"

配置項

元素自身對齊方式: start | end | center | baseline | stretch
固定寬度: 1/2 | 1/3 | 1/4 | 1/5 | 1/6
排序: order[1-10]
複製代碼

使用

基礎柵格系統

每項寬度相同，天然平分，高度默認都相同

<div data-flex="gutter">
  <div data-cell><div class="item">auto</div></div>
  <div data-cell><div class="item">auto</div></div>
  <div data-cell><div class="item">auto</div></div>
  <div data-cell><div class="item">auto</div></div>
  <div data-cell><div class="item">auto</div></div>
</div>
複製代碼

相對的固定寬度與自適應寬度

<div data-flex="gutter row">
  <div data-cell="1/2"><div class="item">1/2</div></div>
  <div data-cell><div class="item">auto</div></div>
  <div data-cell><div class="item">auto</div></div>
</div>
複製代碼

響應式

響應式柵格系統經過添加媒體查詢到柵格元素或柵格容器來實現。 當知足媒體查詢的條件時，柵格系統就能自動調整。

<div data-flex="full gutter">
  <div data-cell><div class="item">full/auto</div></div>
  <div data-cell><div class="item">full/auto</div></div>
  <div data-cell><div class="item">full/auto</div></div>
</div>
複製代碼

項目對齊

置頂對齊 項目默認是置頂對齊的，手動添加可使用 cross-start

<div data-flex="gutter">
  <div data-cell> <div class="item">置頂對齊</div></div>
  <div data-cell> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
  <div data-cell> <div class="item">置頂對齊</div></div>
</div>
複製代碼

置底對齊

<div data-flex="gutter cross-end">
  <div data-cell> <div class="item">置底對齊</div></div>
  <div data-cell> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
  <div data-cell> <div class="item">置底對齊</div></div>
</div>
複製代碼

垂直居中對齊

<div data-flex="gutter cross-center">
  <div data-cell> <div class="item">居中對齊</div></div>
  <div data-cell> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
  <div data-cell> <div class="item">居中對齊</div></div>
</div>
複製代碼

混合對齊 爲個別項目自身設置獨立的對齊方式

<div data-flex="gutter">
  <div data-cell="start"> <div class="item">居頂對齊</div></div>
  <div data-cell="start"> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
  <div data-cell="center"> <div class="item">居中對齊</div></div>
  <div data-cell="end"> <div class="item">居底對齊</div></div>
</div>

複製代碼

主軸起點對齊

<div data-flex="gutter main-start">
  <div data-cell="1/5"> <div class="item">居左對齊</div></div>
</div>
<div data-flex="gutter main-center">
  <div data-cell="1/5"> <div class="item">居中對齊</div></div>
</div>
<div data-flex="gutter main-end">
  <div data-cell="1/5"> <div class="item">居右對齊</div></div>
</div>
複製代碼

主軸兩端對齊

<h5>兩端對齊</h5>
<div data-flex="gutter main-between">
  <div data-cell="1/5"> <div class="item">兩端對齊</div></div>
  <div data-cell="1/5"> <div class="item">兩端對齊</div></div>
  <div data-cell="1/5"> <div class="item">兩端對齊</div></div>
</div>
複製代碼

主軸分散對齊

<h5>分散對齊</h5>
<div data-flex="gutter main-around">
  <div data-cell="1/5"> <div class="item">分散對齊</div></div>
  <div data-cell="1/5"> <div class="item">分散對齊</div></div>
  <div data-cell="1/5"> <div class="item">分散對齊</div></div>
</div>
複製代碼

無限嵌套

柵格能夠無限嵌套在另外一個柵格中

<div data-flex="gutter">
  <div data-cell>
    <div class="item">
      <div data-flex="gutter">
        <div data-cell><div class="item">1</div></div>
        <div data-cell>
          <div class="item">
            <div data-flex="gutter">
              <div data-cell><div class="item">2</div></div>
              <div data-cell><div class="item">2</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div data-cell="1/4"><div class="item">1/4</div></div>
</div>
複製代碼

自定義順序

<div data-flex="gutter">
  <div data-cell="order5"><div class="item">1</div></div>
  <div data-cell="order3"><div class="item">2</div></div>
  <div data-cell="order2"><div class="item">3</div></div>
  <div data-cell="order1"><div class="item">4</div></div>
  <div data-cell="order4"><div class="item">5</div></div>
</div>
複製代碼

兼容性

flex在演化過程有三個版本，舊版本 display:box | inline-box, 混合版本 display:flexbox | inline-flexbox, 新版本 display: flex | inline-flex

.box{
	display: -webkit-box; /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
	display: -moz-box; /* 老版本語法: Firefox (buggy) */
	display: -ms-flexbox; /* 混合版本語法: IE 10 */
	display: -webkit-flex; /* 新版本語法: Chrome 21+ */
	display: flex; /* 新版本語法: Opera 12.1, Firefox 22+ */
}
複製代碼

舊版相對於新版的主要區別：flex項目必須是block，沒有換行設置，沒有反向設置，主軸沒有space-around，順序值從1開始

關於新舊版的詳情對比可參考下面兩篇

• 深刻理解CSS彈性盒模型flex
• CSS舊版flex及兼容

這裏咱們使用 postcss 插件 autoprefixer 來自動處理新舊版的兼容，配置以下:

autoprefixer({
	browsers: [
	  'ie >= 8',
	  'ie_mob >= 10',
	  'ff >= 26',
	  'chrome >= 30',
	  'safari >= 6',
	  'opera >= 23',
	  'ios >= 5',
	  'android >= 2.3',
	  'bb >= 10'
	]
})
複製代碼

** 這裏只作了語法上的兼容，可是舊版所沒有的特性仍然要警慎使用，參考上面的區別，相信之後隨着瀏覽器的升級，差異會愈來愈小 **

示例

flex.css 的具體源碼，請參考示例

See the Pen <a href='http://codepen.io/togglelt/pen/BpPJQP/'>Flex佈局應用</a> by LT (<a href='http://codepen.io/togglelt'>@togglelt</a>) on <a href='http://codepen.io'>CodePen</a>.

參考閱讀

• Flex 佈局教程：語法篇
• Flex 佈局教程：實例篇