移动端重构系列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