css常用布局的坑之flex布局

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

flex布局设置了wrap（自动换行），它的子view如果需要主动换行的话，可以设置子view的寛或者高是100%，这样后面紧跟着的子view就会自动换行，另起一行。

如果一行有多个子view，怎么让多个子view高度都对齐呢？ Justin-content和align-self和align-content选项基本可以搞定。

text控件的文本虽然设置text-align：center可以居中显示，但是text的高度很高的时候并不能垂直居中，需要设置line-height为text的高度值，那么就是一行就是text的高度这么高。

一劳永逸垂直居中

css常用布局的坑之flex

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://img003.tooopen.com/images/20150928/tooopen_sy_123422343234.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;
}