网站地图    收藏   

主页 > 采坑 > 前端采坑 > css采坑 >

css常用布局的坑之flex

来源:未知    时间:2021-04-28 11:57 作者:小飞侠 阅读:

[导读] css常用布局的坑之flex布局 在这里写一下使用flex布局的心得,它和float流失布局不一样,使用它基本上可以只用一个层级就可以完成所有的布局,因为他是自起始端到末端,线性布局,...

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;
}

image.png

最新评论

添加评论

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论