首页 > 代码库 > 响应式设计手机端flex的用法
响应式设计手机端flex的用法
---恢复内容开始---
今天总结一下flexbox的用法
它用于受极端的响应式布局,前面涉及的css和html知识不再多说,meta标签一定记住!<meta name="viewport",content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no;"。
这其中有一个非常好的垂直水平居中方式,以前我们讲水平垂直居中,通常会用到这个,这个是针对于子元素,这两种对于那种左边是图片,垂直居中简直不要太好用!:
.main{
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
}
有了flex之后,我们就可以这样做了,注意下面这个要对父元素使用,他保证的是子元素:
.main{
justify-content:center;
align-items:center;
display:-webkit-flex;
}
但是如果遇上的是左边是图片,右边是文字的呢?想让他一直占同样的比例,怎么办咧?有办法!
diaplay:-webkit-flex; 父元素
flex:1 ; 子元素 数值多大就是占多少份!
更多详请要看flex了!
flex-wrap: nowrap;
上面这个属性是设置换不换行,比如你的父元素是400px,而各个子元素相加一起大于400px;如果不换行,他就会计算你子元素的比例,而将父元素按比例分,但是如果设置了换行,就会按照子元素原来的大小进行布局,最后不足的时候换行在下一部分,但是第一行的后面会留有父元素剩下的宽度!
---恢复内容结束---
响应式设计手机端flex的用法