移动端布局的一些总结

2016-02-29

css flexbox可伸缩盒模型

感觉有点像bootstrap的分栏，可实现元素的同行分布。

常用语法

.父级{
    display: flex/inline-flex;
}

.子元素{
    flex:1;
}

其它属性

1	flex-direction：row\|row-reserve\|column\|column-reserve【设置父级】

row:横向从左到右排列
row-reserve：反向从右到左第一个排在box最右边
column：纵向排列从上到下
column-reserve：反向从下到上第一个排在box最下部

1	flex-wrap：no-wrap\|wrap\|wrap-reserve【设置父级】

no-wrap：子元素溢出时不换行
wrap：子元素溢出时换行
wrap-reserve：反转wrap排列

1	flex-fow：<'flex-direction'> <'flex-wrap'>【设置父级】

可以理解为同时设置以上属性？

1	justify-content：flex-start\|flex-end\|center\|space-between\|space-around【设置父级】

直接画个图吧

属性
flex-start	A	B
flex-end					A	B
center			A	B
space-between	A					B
space-around		A		B

1	align-items：flex-start\|flex-end\|center\|baseline\|stretch【设置父级】

这个属性主要用于同行元素的纵轴对齐排列，前三个分别是顶端对齐、底端对齐、居中对齐，第四个基准线对齐吧，word里这个概念我都没理解，第五个容器会在纵轴方向上努力扩张直达边界。

1	align-content：flex-start\|flex-end\|center\|space-between\|space-around\|stretch【设置父级】

参考justify-content和align-items，不过是以一行的元素为单位进行定位。

1	order：[整数，可以为负数]【设置子元素】

整数值最小的排在最前面

1	flex-grow：[数值，不允许为负数]【设置子元素】

分两种情况来说吧：

第一，子元素未设置宽高。原则上是不分配额外空间的，因为flex-grow默认为0，设置了flew-grow的元素按数值比例分配父级容器空间。

第二，子元素设置宽高。首先，所有子元素按所设置的宽高固定，若父级容器还有剩余空间，设置flew-grow的元素继续按比例扩展（但我总感觉不成比例，只是数值大的稍微大一点）。

1	flex-shrink：[数值，不允许为负数]【设置子元素】

这个有点有趣的。假如父级容器设置300px，六个子元素都为100px，设置flex-shrink分别为1,1,3,2,2,1（当然，flex-shrink默认值为1）。回到刚才，我们会发现超出100*6-300=300px，好了，现在按比率收缩，则六个子元素分别收缩30px，30px，90px，60px，60px，30px。子元素实际尺寸为270px，270px，210px，240px，240px，270px。

1	flex-basis：px\|%【设置子元素】

给某一元素设置特定的值。

1	align-self：auto\|flex-start\|flex-end\|center\|baseline\|stretch【设置子元素】

center可以配合实现水平垂直居中！
其它的就是子元素的定位，可参考align-items。
（center可以用于实现水平垂直居中）

参考资料：http://caibaojian.com/flexbox-guide.html

calc

calc是calculate的缩写，意为计算，它支持加减乘除运算。

语法：

1	.class {width: calc(expression);}

如：

1	width:calc(100%-50px-2rem);

但是，它不可与box-sizing:border-box;同时使用，否则会造成冲突。

水平垂直居中

说到水平垂直居中，虽然flex-box可以实现，但用transform：translate；比较多，因为感觉灵活性大一点。

 .center{
    width:50%;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

不过有一种情况：一个宽高百分比的容器内有一个宽高固定像素的元素，使元素居中。后来想出来一种超级简单的方法：在元素外再包一层div进行设置居中。当时被自己机智哭，现在想想好像也没什么。

移动端自适应

flex布局

如上。不过需要考虑兼容性问题

rem布局

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if(clientWidth>=640){
                docEl.style.fontSize = '100px';
            }else{
                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

然后css中设置rem（=px/100）即可。
原理不大难理解，懒得重新打一份了。
参考：http://caibaojian.com/rem-responsive.html
另外这个作者还分享了一些技巧可供参考：

导航用flex，其余用rem。
页面中模块间距为0.2rem。
字体常用大小为0.2rem 0.24rem 0.28rem 0.32rem

效果图宽度定为640px，最外层div设置：

position: relative;
width: 100%;
max-width: 640px;
min-width:320px;
margin:0 auto;

元素水平居中固定到页面底部(在之前div下)

position:fixed;
bottom:0;
z-index:100;
width:100%;
max-width: 640px;
min-width:320px;

flexible.js

参考：http://caibaojian.com/flexible-js.html?wb

1rem=75px
自己瞧，懒得再打字了手已废。

暂时就那么多了，日后想起来或者再遇见再补充。