css常用布局的坑

flex布局

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

在这里写一下使用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的高度这么高。
一劳永逸垂直居中

  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文件如下：
这里写图片描述
显示效果如下：

flex布局

frame布局效果

猜你喜欢