移動端重構系列4——等分，居中等

移動端重構系列-mobile

本系列文章，若是沒有特別說明，兼容安卓4.0.4+

之因此把本篇單獨拿出來說解，是由於這些在移動端使用的頻率過高了，而後實現方法也不盡相同，而這裏主要說下如何用flex和translate來實現。

注：代碼部分涉及到sass的mixin部分，在sandal的mixin文件中均有定義，能夠直接使用。

等分

在說等分以前，先拋出一個問題，以下面的emmet代碼，footer部分的導航有些頁面是三個，有些頁面是四個，咱們要求的是不管是三個仍是四個甚至於5個，都平分寬度。

footer.footer>ul.nav-links>li*3 footer.footer>ul.nav-links>li*4 

float

若是採用float技術的話，那估計只有在ul上添加額外的class來設置li的百分比寬度了。

.nav-links li{ float:left; width:25%; } .percent-half li{ width:50%; } .percent-third li{ width:33.333%; } ... 

這個太蛋疼了，高上大的移動端怎麼能用這麼老套的東西呢，因此不考慮。

table

也許這個技術會被不少人忘記，不過用在移動端確實不錯，關鍵是沒有兼容問題的。主要設置父元素的display: table;table-layout: fixed;width: 100%;，而後設置子元素爲display: table-cell;便可。

// table 等分 @mixin table-equal($children: li) { display: table; table-layout: fixed; width: 100%; $childrenEle: li div p a span strong; @if index($childrenEle, $children) { #{$children} { display: table-cell; } } @else { .#{$children} { display: table-cell; } } } .nav-links{ @include table-equal; } 

這個mixin內部定義了一個$childrenEle元素選擇器變量集合，若是傳入的參數是其中的一個，那麼直接使用元素選擇器，不然就當class選擇器使用，如默認的li解析後就是li{display: table-cell;}，而若是傳入children，則解析後就是.children{display: table-cell;}。下面的flex一樣使用了該方法

注：在移動端display: table;一樣也是個有利的神器，比起各類float什麼的，這個技術仍是能夠單刀直入，直指問題核心

flex

flex技術是個好技術，不過最關鍵的仍是其兼容問題，算起來它有三個版本，是有點亂哈哈。不過sandal的css3文件已經封裝好了，因此只管調用，它會自動生成對應的兼容代碼。

// flex 等分 @mixin flex-equal($children: li) { @extend %display-flex; $childrenEle: li div p a span strong; @if index($childrenEle, $children) { #{$children} { @include flex(1); } } @else { .#{$children} { @include flex(1); } } } .nav-links{ @include flex-equal; } 

等分，居中等demo測試

水平垂直居中

以簡單的彈窗爲例：

<div class="overlay"> <section class="modal"> <div class="modal-bd"> <p>青，取之於藍，而青於藍；冰，水爲之，而寒於水。故木受繩則直，金就礪則利，君子博學而日參省乎己，則知明而行無過矣。</p> </div> </section> </div> 

也許看到這個結構，不少人都會納悶，由於你們看到更多的應該是：.overlay+section.modal，即蒙版與彈出內容是兄弟元素，而不是嵌套關係。這裏先賣個關子，到modal實例的時候，再分析。

flex

樣式寫在父元素上

// flex center // display:flex %display-flex,%flex-display { @include display-flex; } @mixin flex-center($direction: both) { @extend %display-flex; @if $direction == both { @include justify-content(center); @include align-items(center); } @else if $direction == x { @include justify-content(center); } @else if $direction == y { @include align-items(center); } } .overlay{ z-index: 980; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.8); @include flex-center; // overlay調用 } .modal{ background-color: #fff; border-radius: 5px; margin: 0 10px; overflow: hidden; .modal-bd{ padding: 15px; } } 

關於flex的單個元素水平垂直居中，新語法直接父元素爲flex，子元素設置margin爲auto便可，由於移動端還在使用舊語法，因此暫不使用margin這個方法，而是設置父元素的水平及垂直都居中

translate

樣式寫在要居中的元素上。原理就是先絕對定位，left/top爲50%，而後經過translate偏移-50%回去（translate偏移的百分比爲自身寬高的百分比），比從前的margin-top/left設置負值偏移回去高級點，由於設置margin必須得知道自身元素的寬高，而後設置具體的數字，而translate不用管自身的寬高，直接50%就能夠搞定

// translate 50% @mixin translate-center($direction: both) { position: absolute; @if $direction == both { top: 50%; left: 50%; @include translate(-50%, -50%); } @else if $direction == x { left: 50%; @include translate(-50%, 0); } @else if $direction == y { top: 50%; @include translate(0, -50%); } } .overlay{ z-index: 980; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.8); } .modal{ @include translate-center; // modal調用 background-color: #fff; border-radius: 5px; width:300px; overflow: hidden; .modal-bd{ padding: 15px; } } 

上面的flex和translate兩個mixin均可以實現單獨的水平居中或垂直居中，傳入相應的x或y便可。不管是flex仍是translate水平垂直居中都有兩個很好的優點即無需藉助額外的空標籤，也無需知道子元素的具體寬高，這比從前的一些方法強多了

等分，居中等demo測試

左右兩端對齊

對於左右兩端對齊，之前使用最多的可能就是float，position了，如今一樣能夠採用flex來搞定

// justify @mixin justify($extend: true) { @if $extend { @extend %justify; } @else { @extend %display-flex; @include justify-content(space-between); } } %justify { @include justify(false); } .justify{ @include justify; } 

等分，居中等demo測試

總結

若是你開始作移動端，那麼flex和transform這兩大屬性有必要熟練運用，運用好了能解決不少問題。通常來講flex能夠用來實現一些佈局，不再用動不動就float了；而transform中的rotate及translate則能夠實現一些旋轉及位移移動，旋轉能夠搞定圖標的一些變化，而位移移動則能夠實現居中，位移動畫等。

如需轉載，煩請註明出處：http://www.w3cplus.com/mobile/mobile-terminal-refactoring-uniform-and-center.html