css常用布局的坑

flex布局

flex不能算是布局，而是说内部view是采用弹性的方式排列，用法，详情见：点击这里

在这里写一下使用flex布局的心得，它和float流失布局不一样，使用它基本上可以只用一个层级就可以完成所有的布局，因为他是自起始端到末端，线性布局，可以设置自动换行和线性的方向。

1. flex布局设置了wrap（自动换行），它的子view如果需要主动换行的话，可以设置子view的寛或者高是100%，这样后面紧跟着的子view就会自动换行，另起一行。
2. 如果一行有多个子view，怎么让多个子view高度都对齐呢？ Justin-content和align-self和align-content选项基本可以搞定。
3. text控件的文本虽然设置text-align：center可以居中显示，但是text的高度很高的时候并不能垂直居中，需要设置line-height为text的高度值，那么就是一行就是text的高度这么高。
4. 一劳永逸垂直居中

  display:flex;/*Flex布局*/
  flex-direction: row;
  display: -webkit-flex; /* Safari */
  align-items:center;/*指定垂直居中*/

flex布局不能滥用，如果flex布局嵌套使用的话，很有可能高度不能识别，会导致内容溢出，如果有些内容可以用inline-block的方式解决，就不要使用这么多flex布局。

frame布局效果

在css中有绝对布局，浮动布局，相对布局。如果想实现frame效果的话，可以最外层使用relative布局，内部想要实现层叠效果的控件使用绝对布局，这样内部的子view的绝对位置就是相对父布局的位置来的，而不是相对全屏位置来的。以前总以为绝对布局是相对全屏位置的，现在理解了。

wxss文件如下：

.wrap_user{
  position: relative;
  top: 0;
  left: 0;
  height: 350rpx;
  width: 100%;
}

.bg{
	height: 350rpx;
	 width: 100%;
	 background-image:url('http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg') ;
	 background-repeat:no-repeat;
	 background-size:cover;
}

.userinfo {
	 position: absolute;
	 top: 0;
	 left: 0;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 height: 350rpx;
	 width: 100%;
	 background: rgba(255, 255, 255, 0.5);
	 justify-content: center;
	 align-content: center;
}

.userinfo-avatar {
	width: 128rpx;
	 height: 128rpx;
	 margin: 20rpx;
	 border-radius: 50%;
}

.userinfo-nickname {
	color: #000000;
}

wxml文件如下：

显示效果如下：